- แก้ error type ของพวกทะเบียนประวัติ

- ปรับ code ส่วนของทะเบียนประวัติลูกจ้าง

src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="props.icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="props.icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="props.header != ''"
+      >
+        {{ props.header }}
+      </div>
+    </div>
+  </div>
+</template>

src/modules/08_registryEmployee/components/AddEmployee/Main.vue

@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import type { QForm } from "quasar";
+
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
+
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+
+const informaData = ref<Information>({
+  cardid: null,
+  age: null,
+  prefix: null,
+  prefixId: null,
+  firstname: null,
+  lastname: null,
+  birthDate: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+});
+
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+// รายการข้อมูลทั้งหมด
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [],
+  employeeTypeOps: [],
+});
+// ข้อมูลเมื่อเลือกแล้ว
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [],
+  employeeTypeOps: [],
+});
+
+// call function get รายการข้อมูลต่างๆ
+onMounted(async () => {
+  await fetchPerson();
+});
+
+/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => { })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// รูป profile
+const inputImage = ref<any>(null);
+const image = ref<any>(null);
+const fileData = ref<any>(null);
+const uploadImage = async (e: any) => {
+  const input = e.target.files;
+  if (input.length > 0) {
+    const url = URL.createObjectURL(input[0]);
+    image.value = url;
+    fileData.value = input[0];
+  }
+};
+
+// คลิกแก้ไขรูป profile
+const addNewImage = async () => {
+  inputImage.value.click();
+};
+
+// ตรวจสอบเลขประจำตัวประชาชน
+const defaultCitizenData = ref<string>("");
+const changeCardID = async (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// filter list ข้อมูลต่างๆ
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
+const calculateMaxDate = () => {
+  const today = new Date();
+  today.setDate(today.getDate() - 1);
+  return today;
+};
+
+// เช็คเรื่องการเกษียณ
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    showLoader();
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        informaData.value.birthDate = null;
+        informaData.value.age = "";
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (saveDataTest: Boolean) => {
+      if (saveDataTest) {
+        dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
+      }
+    });
+  }
+};
+
+// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
+const addData = async () => {
+  const formData = new FormData();
+  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
+  if (informaData.value.cardid != undefined)
+    formData.append("citizenId", informaData.value.cardid);
+  if (informaData.value.prefixId != undefined)
+    formData.append("prefixId", informaData.value.prefixId);
+  if (informaData.value.firstname != undefined)
+    formData.append("firstName", informaData.value.firstname);
+  if (informaData.value.lastname != undefined)
+    formData.append("lastName", informaData.value.lastname);
+  if (informaData.value.genderId != undefined)
+    formData.append("genderId", informaData.value.genderId);
+  if (informaData.value.nationality != undefined)
+    formData.append("nationality", informaData.value.nationality);
+  if (informaData.value.ethnicity != undefined)
+    formData.append("race", informaData.value.ethnicity);
+  if (informaData.value.religionId != undefined)
+    formData.append("religionId", informaData.value.religionId);
+  if (informaData.value.birthDate != undefined)
+    formData.append(
+      "birthDate",
+      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
+    );
+  if (informaData.value.bloodId != undefined)
+    formData.append("bloodGroupId", informaData.value.bloodId);
+  if (informaData.value.statusId != undefined)
+    formData.append("relationshipId", informaData.value.statusId);
+  if (informaData.value.tel != undefined)
+    formData.append("telephoneNumber", informaData.value.tel);
+  if (informaData.value.employeeType != undefined)
+    formData.append("employeeType", informaData.value.employeeType);
+  if (informaData.value.employeeClass != undefined)
+    formData.append("employeeClass", informaData.value.employeeClass);
+
+  showLoader();
+  await http
+    .post(config.API.profileEmployeeIn, formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await changeBirth(informaData.value.birthDate ?? new Date());
+      await clickBack();
+      hideLoader();
+    });
+  hideLoader();
+};
+
+// ปุ่ม back
+const clickBack = () => {
+  router.push("/registry-employee");
+};
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
+    <q-form ref="myform" class="col-12 q-pt-md">
+      <div class="row">
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
+              lazy-rules :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                (val: string) =>
+                  val.length >= 13 ||
+                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+              ]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
+            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
+              lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
+              :options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
+              @filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
+              :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
+              :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
+          </div>
+        </div>
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+              :max-date="calculateMaxDate()" @update:model-value="handleDate">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
+                  ? null
+                  : date2Thai(informaData.birthDate)
+                  " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                  :label="`${'วัน/เดือน/ปี เกิด'}`">
+                  <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-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space dense lazy-rules readonly borderless style="padding:0 12px;"
+              :model-value="informaData.age" :label="`${'อายุ'}`" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
+              option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+                )" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
+              option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+                )" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
+              :label="`${'สัญชาติ'}`" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
+              :label="`${'เชื้อชาติ'}`" />
+          </div>
+        </div>
+        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
+              option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+                )" />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
+              option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
+              input-debounce="0" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+                )" clearable />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
+              :label="`${'เบอร์โทร'}`" :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+                (val: string) =>
+                  val.length >= 10 ||
+                  `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
+              ]" mask="##########" />
+          </div>
+        </div>
+      </div>
+    </q-form>
+    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+    <div class="row col-12">
+      <q-space />
+      <q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
+    </div>
+  </q-card>
+
+  <!-- Header  -->
+  <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
+        @click="router.go(-1)">
+      </q-btn>
+      <q-avatar size="65px" rounded class="containerimage">
+        <img v-if="image == null" src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+        <img :src="image" class="bg-grey-3" style="object-fit: cover" />
+        <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="addNewImage()">
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
+        </div>
+      </q-avatar>
+
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            เพิ่มข้อมูลทะเบียนประวัติ
+          </div>
+          <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
+        </div>
+      </div>
+      <q-space />
+    </div>
+  </q-page-sticky>
+  <!-- End Header  -->
+</template>

src/modules/08_registryEmployee/components/DialogSendToCommand.vue

@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { FormRegistryEmployee } from '../interface/request/Main';
+import { useQuasar, type QTableProps, QInput } from 'quasar';
+import { useCounterMixin } from '@/stores/mixin';
+import http from '@/plugins/http';
+import config from "@/app.config";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+    success,
+    messageError,
+    showLoader,
+    hideLoader,
+    dialogConfirm,
+    dialogMessageNotify,
+} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
+
+const $q = useQuasar();
+
+const props = defineProps({
+    modal: {
+        type: Boolean,
+        default: false,
+    },
+    rows: {
+        type: Object,
+        default: []
+    },
+    fetchNewList: {
+        type: Function,
+        default: () => { /* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */ }
+    },
+    closeDialog: {
+        type: Function,
+        default: () => { /* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */ }
+    },
+});
+
+const filter = ref<string>("");
+const filterRef = ref<QInput>();
+// visible columns ตารางใน dialog ส่งไปออกคำสั่ง
+const visibleColumnsOrder = ref<string[]>([
+    "no",
+    "fullname",
+    "fullnameOld",
+    "oc",
+    "positionEmployeePosition",
+    "positionEmployeePositionSide",
+    "positionLine",
+    "govAge",
+    "positionEmployeeGroup",
+    "dateAppoint",
+    "refSalary",
+    "dateStart",
+    "createdAt",
+    "salaryDate",
+    "age",
+    "amount",
+    "statustext",
+    "leaveDateOrder",
+    "newAgency",
+    "currentAgency",
+]);
+
+// คอลัมน์ในตาราง
+const columnsOrder = ref<QTableProps["columns"]>([
+    {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "fullname",
+        align: "left",
+        label: "ชื่อ-สกุล",
+        sortable: true,
+        field: "fullname",
+        headerStyle: "font-size: 14px; min-width: 200px",
+        style: "font-size: 14px; ",
+    },
+    {
+        name: "newAgency",
+        align: "left",
+        label: "หน่วยงานที่รับการบรรจุ",
+        sortable: true,
+        field: "newAgency",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "currentAgency",
+        align: "left",
+        label: "หน่วยงานปัจจุบัน",
+        sortable: true,
+        field: "currentAgency",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "amount",
+        align: "left",
+        label: "ค่าจ้าง",
+        sortable: true,
+        field: "amount",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "govAge",
+        align: "left",
+        label: "อายุราชการ(ปี)",
+        sortable: true,
+        field: "govAge",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "dateAppoint",
+        align: "left",
+        label: "วันที่จ้าง",
+        sortable: true,
+        field: "dateAppoint",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "dateStart",
+        align: "left",
+        label: "วันที่เริ่มปฎิบัติราชการ",
+        sortable: true,
+        field: "dateStart",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "salaryDate",
+        align: "left",
+        label: "วันที่แต่งตั้ง",
+        sortable: true,
+        field: "salaryDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "refSalary",
+        align: "left",
+        label: "เอกสารอ้างอิง",
+        sortable: true,
+        field: "refSalary",
+        headerStyle: "font-size: 14px; min-width: 200px",
+        style: "font-size: 14px; ",
+    },
+    {
+        name: "age",
+        align: "left",
+        label: "อายุ",
+        sortable: true,
+        field: "age",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+    {
+        name: "fullnameOld",
+        align: "left",
+        label: "ชื่อ-สกุล(เดิม)",
+        sortable: true,
+        field: "fullnameOld",
+        headerStyle: "font-size: 14px; min-width: 200px",
+        style: "font-size: 14px; ",
+    },
+    {
+        name: "createdAt",
+        align: "left",
+        label: "วันที่สร้าง",
+        sortable: true,
+        field: "createdAt",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "leaveDateOrder",
+        align: "left",
+        label: "วันที่พ้นราชการ",
+        sortable: true,
+        field: "leaveDateOrder",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+    },
+    {
+        name: "statustext",
+        align: "left",
+        label: "สถานะ",
+        sortable: true,
+        field: "statustext",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            }),
+    },
+]);
+
+// checkbox เลือกคนไปออกคำสั่ง
+const selected = ref<any>([]);
+const save = () => {
+    if (selected.value.length == 0) {
+        dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
+    } else dialogConfirm($q, () => sendToCommand());
+};
+
+// post ส่งไปออกคำสั่ง
+const sendToCommand = async () => {
+    let pId: string[] = [];
+    selected.value.forEach((e: any) => {
+        pId.push(e.id);
+    });
+    let data = {
+        id: pId,
+    };
+    showLoader();
+    await http
+        .post(config.API.organizationEmployeeSendOrder, data)
+        .then((res: any) => {
+            success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+            messageError($q, e);
+        })
+        .finally(async () => {
+            props.fetchNewList()
+            props.closeDialog()
+            selected.value = [];
+            hideLoader();
+        });
+};
+
+// เลือกรายการเฉพาะคนที่มีสถานะ PENDING (เลือกตำแหน่งแล้ว)
+const rowsOrder = ref<FormRegistryEmployee[]>([]);
+const filterRowData = () => {
+    rowsOrder.value = props.rows.filter(
+        (r: FormRegistryEmployee) => r.status == "PENDING"
+    );
+}
+
+// เช็ค props modal ทำการ filter เมื่อคลิก icon ส่งไปออกคำสั่ง
+watch(props, () => {
+    if (props.modal === true && props.rows) {
+        filterRowData()
+    }
+});
+</script>
+
+<template>
+    <q-dialog v-model="props.modal">
+        <q-card style="width: 900px; max-width: 80vw">
+            <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
+            <q-separator />
+            <q-card-section class="q-pt-none">
+                <div class="row justify-end">
+                    <div class="col-5">
+                        <q-toolbar style="padding: 0">
+                            <q-input borderless outlined dense debounce="300" v-model="filter" ref="filterRef"
+                                placeholder="ค้นหา" style="width: 850px; max-width: auto">
+                                <template v-slot:append>
+                                    <q-icon name="search" />
+                                </template>
+                            </q-input>
+                        </q-toolbar>
+                    </div>
+                </div>
+
+                <d-table :rows="rowsOrder" :columns="columnsOrder" :visible-columns="visibleColumnsOrder" :filter="filter"
+                    row-key="id" selection="multiple" v-model:selected="selected">
+                    <template v-slot:header-selection="scope">
+                        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+                    </template>
+                    <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                            <q-td>
+                                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+                            </q-td>
+
+                            <q-td key="no" :props="props">
+                                {{ props.rowIndex + 1 }}
+                            </q-td>
+                            <q-td key="fullname" :props="props">
+                                {{ props.row.fullname }}
+                            </q-td>
+                            <q-td key="newAgency" :props="props">
+                                <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
+                                    props.row.draftPositionEmployee == null
+                                    ">
+                                    <div class="text-weight-medium">
+                                        {{ "-" }}
+                                    </div>
+                                </div>
+                                <div class="col-12" v-else>
+                                    <div class="text-weight-medium">
+                                        {{ props.row.draftOrganizationOrganization ?? "-" }}
+                                    </div>
+                                    <div class="text-weight-light">
+                                        {{ props.row.draftPositionEmployee ?? "-" }}
+                                    </div>
+                                </div>
+                            </q-td>
+                            <q-td key="currentAgency" :props="props">
+                                <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
+                                    <div class="text-weight-medium">
+                                        {{ "-" }}
+                                    </div>
+                                </div>
+                                <div class="col-12" v-else>
+                                    <div class="text-weight-medium">
+                                        {{ props.row.oc ?? "-" }}
+                                    </div>
+                                    <div class="text-weight-light">
+                                        {{ props.row.position ?? "-" }}
+                                    </div>
+                                </div>
+                            </q-td>
+
+                            <q-td key="amount" :props="props">
+                                {{ props.row.amount }}
+                            </q-td>
+                            <q-td key="govAge" :props="props">
+                                {{ props.row.govAge }}
+                            </q-td>
+                            <q-td key="dateAppoint" :props="props">
+                                {{ props.row.dateAppoint }}
+                            </q-td>
+                            <q-td key="dateStart" :props="props">
+                                {{ props.row.dateStart }}
+                            </q-td>
+                            <q-td key="salaryDate" :props="props">
+                                {{ props.row.salaryDate }}
+                            </q-td>
+                            <q-td key="refSalary" :props="props">
+                                {{ props.row.refSalary }}
+                            </q-td>
+                            <q-td key="age" :props="props">
+                                {{ props.row.age }}
+                            </q-td>
+                            <q-td key="fullnameOld" :props="props">
+                                {{ props.row.fullnameOld }}
+                            </q-td>
+                            <q-td key="createdAt" :props="props">
+                                {{ props.row.createdAt }}
+                            </q-td>
+                            <q-td key="isLeave" :props="props">
+                                {{ props.row.isLeave }}
+                            </q-td>
+
+                            <q-td key="leaveDateOrder" :props="props">
+                                {{ props.row.leaveDateOrder }}
+                            </q-td>
+                            <q-td key="statustext" :props="props">
+                                {{ props.row.statustext }}
+                            </q-td>
+                        </q-tr>
+                    </template>
+                </d-table>
+            </q-card-section>
+
+            <q-card-actions align="right" class="bg-white text-teal">
+                <q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue

@@ -0,0 +1,985 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Assessment";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
+  mixin;
+const route = useRoute();
+const id = ref<string>("");
+const name = ref<string>();
+const point1Total = ref<number>();
+const point1 = ref<number>();
+const point2Total = ref<number>();
+const point2 = ref<number>();
+const pointSumTotal = ref<number>();
+const pointSum = ref<number>();
+const date = ref<Date>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.assessment.columns.length == 0
+  ? (visibleColumns.value = [
+      "point1Total",
+      "point1",
+      "point2Total",
+      "point2",
+      "pointSumTotal",
+      "pointSum",
+      "name",
+      "date",
+    ])
+  : (visibleColumns.value = profileData.assessment.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("assessment", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileAssessmentId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            point1Total: e.point1Total,
+            point1: e.point1,
+            point2Total: e.point2Total,
+            point2: e.point2,
+            pointSumTotal: e.pointSumTotal,
+            pointSum: e.pointSum,
+            date: new Date(e.date),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  name.value = row.name;
+  point1Total.value = row.point1Total;
+  point1.value = row.point1;
+  point2Total.value = row.point2Total;
+  point2.value = row.point2;
+  pointSumTotal.value = row.pointSumTotal;
+  pointSum.value = row.pointSum;
+  date.value = row.date;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = () =>{
+  dialogConfirm($q,()=>SaveData())
+}
+const SaveData = async () => {
+  await myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileAssessmentId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        point1Total: point1Total.value,
+        point1: point1.value,
+        point2Total: point2Total.value,
+        point2: point2.value,
+        pointSumTotal: pointSumTotal.value,
+        pointSum: pointSum.value,
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileAssessmentId(id.value), {
+      id: id.value,
+      name: name.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileAssessmentId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  name.value = props.row.name;
+  point1Total.value = props.row.point1Total;
+  point1.value = props.row.point1;
+  point2Total.value = props.row.point2Total;
+  point2.value = props.row.point2;
+  pointSumTotal.value = props.row.pointSumTotal;
+  pointSum.value = props.row.pointSum;
+  date.value = props.row.date;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  name.value = "";
+  point1Total.value = 0;
+  point1.value = 0;
+  point2Total.value = 0;
+  point2.value = 0;
+  pointSumTotal.value = 0;
+  pointSum.value = 0;
+  date.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileAssessmentHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          name: e.name,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
+          date: new Date(e.date),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+// const validateData = async () => {
+//   checkValidate.value = true;
+//   await myForm.value.validate().then((result: boolean) => {
+//     if (result == false) {
+//       checkValidate.value = false;
+//     }
+//   });
+// };
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const textRangePoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+};
+
+const textPoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+};
+</script>
+
+<!-- card ผลการประเมินการปฏิบัติราชการ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ผลการประเมินการปฏิบัติราชการ"
+        icon="mdi-clipboard-text"
+        :statusEdit="statusEdit"
+      >
+        <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 == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ผลการประเมินการปฏิบัติราชการ"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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(date)"
+                    :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-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
+                hide-bottom-space
+                :label="`${'คะแนน'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อแบบประเมิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div> -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue

@@ -0,0 +1,947 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Discipline";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Discipline";
+import type {
+  DisciplineOps,
+  DataOption,
+} from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader, dialogConfirm } =
+  mixin;
+const route = useRoute();
+const id = ref<string>("");
+const level = ref<string>();
+const Ops = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const OpsFilter = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const detail = ref<string>();
+const unStigma = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const date = ref<Date>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขวินัย"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.discipline.columns.length == 0
+  ? (visibleColumns.value = [
+      "level",
+      "detail",
+      "unStigma",
+      "refCommandNo",
+      "refCommandDate",
+      "date",
+    ])
+  : (visibleColumns.value = profileData.discipline.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("discipline", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const filterSelector = (val: string, update: Function, refData: string) => {
+  switch (refData) {
+    case "levelOptions":
+      update(() => {
+        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileDisId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.level,
+            detail: e.detail,
+            unStigma: e.unStigma,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            date: new Date(e.date),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  level.value = row.level;
+  detail.value = row.detail;
+  unStigma.value = row.unStigma;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  date.value = row.date;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = () => {
+  dialogConfirm($q,()=>SaveData())
+}
+const SaveData = async () => {
+  await myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileDisId(profileId.value), {
+        id: id.value,
+        level: level.value,
+        detail: detail.value,
+        unStigma: unStigma.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileDisId(id.value), {
+      id: id.value,
+      level: level.value,
+      detail: detail.value,
+      unStigma: unStigma.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileDisId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  level.value = props.row.level;
+  detail.value = props.row.detail;
+  unStigma.value = props.row.unStigma;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  date.value = props.row.date;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  level.value = "";
+  detail.value = "";
+  unStigma.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+  date.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileDisHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          level: e.level,
+          detail: e.detail,
+          unStigma: e.unStigma,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          date: new Date(e.date),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+// const validateData = async () => {
+//   checkValidate.value = true;
+//   await myForm.value.validate().then((result: boolean) => {
+//     if (result == false) {
+//       checkValidate.value = false;
+//     }
+//   });
+// };
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+
+<!-- card วินัย -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วินัย"
+        icon="mdi-scale-balance"
+        :statusEdit="statusEdit"
+      >
+        <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 == 'refCommandDate' || col.name == 'date'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="วินัย" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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(date)"
+                    :rules="[(val:string) => !!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-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="level"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'refCommandDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/08_registryEmployee/components/EditEmployee/Document.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { onMounted, computed, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const route = useRoute();
+const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const edit = ref<boolean>(false);
+const uploader = ref<any>();
+const files = ref<any>([]);
+const file = ref<any>([]);
+const name = ref<string>("");
+const myform = ref<QForm | null>(null);
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profilePaperId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        files.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profilePaperId(id))
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+const uploadData = () => {
+  dialogConfirm($q, () => Datasave());
+};
+const Datasave = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+        if (props.statusAdd) {
+          // await addData();
+        } else {
+          await Dataupload();
+        }
+      } else {
+      }
+    });
+  }
+};
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await getData();
+};
+const Dataupload = async () => {
+  if (profileId.value) {
+    if (file.value.length > 0) {
+      const blob = file.value.slice(0, file.value[0].size);
+      const newFile = new File(blob, name.value, {
+        type: file.value[0].type,
+      });
+      const formData = new FormData();
+      formData.append("avatar", newFile);
+      formData.append("moss", "newFile");
+      console.log(formData);
+      showLoader();
+      await http
+        .post(config.API.profilePaperId(profileId.value), formData)
+        .then((res) => {
+          const data = res.data.result;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          uploader.value.reset();
+          name.value = "";
+          edit.value = false;
+          emit("update:statusEdit", false);
+          await getData();
+        });
+    } else {
+      // modalError(
+      //   $q,
+      //   "ไม่สามารถอัปโหลดไฟล์ได้",
+      //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+      // );
+      getData();
+    }
+  }
+};
+
+const fileAdd = async (val: any) => {
+  name.value = val[0].name;
+  file.value = val;
+};
+
+const downloadData = async (path: string) => {
+  window.open(path);
+};
+
+const changeBtn = async () => {
+  name.value = "";
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <q-form ref="myform" class="col-12">
+      <HeaderTop
+        v-model:edit="edit"
+        header="เอกสารหลักฐาน"
+        icon="mdi-file-document"
+        :history="false"
+        :changeBtn="changeBtn"
+        :cancel="onCancel"
+        :disable="statusEdit"
+        :save="uploadData"
+      />
+      <div class="row col-12 q-pt-sm">
+        <q-card bordered flat class="full-width">
+          <q-list separator>
+            <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+              <q-item-section>
+                <q-item-label class="full-width ellipsis">
+                  {{ file.fileName }}
+                </q-item-label>
+
+                <q-item-label caption> </q-item-label>
+              </q-item-section>
+              <q-item-section top side>
+                <div class="row col-12">
+                  <q-btn
+                    class="gt-xs"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadData(file.file)"
+                  />
+                  <q-btn
+                    class="gt-xs"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    color="red"
+                    icon="mdi-delete-outline"
+                    v-show="edit"
+                    @click="deleteData(file.id)"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-input
+          v-if="edit"
+          class="q-mt-sm col-12 q-pb-xs"
+          outlined
+          dense
+          lazy-rules
+          v-model="name"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+          :label="`${'ชื่อเอกสาร'}`"
+        />
+        <q-uploader
+          v-if="edit"
+          color="gray"
+          type="file"
+          flat
+          @factory="uploadData"
+          ref="uploader"
+          class="full-width"
+          text-color="white"
+          :max-size="10000000"
+          accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+          bordered
+          label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+          @added="fileAdd"
+        >
+          <template v-slot:header="scope">
+            <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+              <q-btn
+                v-if="scope.queuedFiles.length > 0"
+                icon="clear_all"
+                @click="scope.removeQueuedFiles"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ลบทั้งหมด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="scope.uploadedFiles.length > 0"
+                icon="done_all"
+                @click="scope.removeUploadedFiles"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+              </q-btn>
+              <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+              <div class="col">
+                <div class="q-uploader__title">
+                  {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                </div>
+                <div class="q-uploader__subtitle">
+                  {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+                </div>
+              </div>
+              <q-btn
+                v-if="scope.canAddFiles"
+                type="a"
+                icon="add_box"
+                @click="scope.pickFiles"
+                round
+                dense
+                flat
+              >
+                <q-uploader-add-trigger />
+                <q-tooltip>เลือกไฟล์</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="scope.isUploading"
+                icon="clear"
+                @click="scope.abort"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+              </q-btn>
+            </div>
+          </template>
+        </q-uploader>
+      </div>
+    </q-form>
+  </q-card>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue

@@ -0,0 +1,909 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type {
+  Address,
+  DataOption,
+  zipCodeOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultAddress } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Address";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Address";
+import HistoryTable from "@/components/TableHistory.vue";
+import { useRoute } from "vue-router";
+import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const edit = ref<boolean>(false);
+const addressData = ref<Address>(defaultAddress);
+const myform = ref<any>();
+const codep = ref<string>("");
+const codec = ref<string>("");
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const Ops = ref<AddressOps>({
+  provinceOps: [],
+  districtOps: [],
+  districtCOps: [],
+  subdistrictOps: [],
+  subdistrictCOps: [],
+});
+const OpsFilter = ref<AddressOps>({
+  provinceOps: [],
+  districtOps: [],
+  districtCOps: [],
+  subdistrictOps: [],
+  subdistrictCOps: [],
+});
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "registrationAddress",
+    align: "left",
+    label: "ที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationProvince",
+    align: "left",
+    label: "จังหวัดตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationDistrict",
+    align: "left",
+    label: "เขต/อำเภอตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSubDistrict",
+    align: "left",
+    label: "ตำบล/แขวงตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSame",
+    align: "left",
+    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSame",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentAddress",
+    align: "left",
+    label: "ที่อยู่ปัจจุบัน",
+    sortable: true,
+    field: "currentAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentProvince",
+    align: "left",
+    label: "จังหวัดปัจจุบัน",
+    sortable: true,
+    field: "currentProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentDistrict",
+    align: "left",
+    label: "เขต/อำเภอปัจจุบัน",
+    sortable: true,
+    field: "currentDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentSubDistrict",
+    align: "left",
+    label: "ตำบล/แขวงปัจจุบัน",
+    sortable: true,
+    field: "currentSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ปัจจุบัน",
+    sortable: true,
+    field: "currentZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "currentAddress",
+  "currentDistrict",
+  "currentProvince",
+  "currentSubDistrict",
+  "currentZipCode",
+  "registrationAddress",
+  "registrationDistrict",
+  "registrationProvince",
+  "registrationSame",
+  "registrationSubDistrict",
+  "registrationZipCode",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await getNewData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    addressData.value = {
+      address: null,
+      provinceId: null,
+      districtId: null,
+      subdistrictId: null,
+      addressC: null,
+      provinceIdC: null,
+      districtIdC: null,
+      subdistrictIdC: null,
+      codep: null,
+      codec: null,
+      same: "0",
+    };
+  }
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "provinceOps":
+      update(() => {
+        Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtOps":
+      update(() => {
+        Ops.value.districtOps = OpsFilter.value.districtOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtCOps":
+      update(() => {
+        Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictOps":
+      update(() => {
+        Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictCOps":
+      update(() => {
+        Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileAdrsHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          currentAddress: e.currentAddress,
+          currentDistrict: e.currentDistrict,
+          currentProvince: e.currentProvince,
+          currentSubDistrict: e.currentSubDistrict,
+          currentZipCode: e.currentZipCode,
+          registrationSame: e.registrationSame,
+          registrationAddress: e.registrationAddress,
+          registrationDistrict: e.registrationDistrict,
+          registrationProvince: e.registrationProvince,
+          registrationSubDistrict: e.registrationSubDistrict,
+          registrationZipCode: e.registrationZipCode,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await getNewData();
+};
+
+const getNewData = async () => {
+  await fetchData();
+  await fetchProvince();
+  await fetchDistrict(addressData.value.provinceId, "1");
+  await fetchDistrict(addressData.value.provinceIdC, "2");
+  await fetchSubDistrict(addressData.value.districtId, "1");
+  await fetchSubDistrict(addressData.value.districtIdC, "2");
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    showLoader();
+    await http
+      .get(config.API.profileAdrsId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+
+        addressData.value.address = data.registrationAddress;
+        addressData.value.addressC = data.currentAddress;
+        addressData.value.districtId =
+          data.registrationDistrictId !== "00000000-0000-0000-0000-000000000000"
+            ? data.registrationDistrictId
+            : "";
+        addressData.value.districtIdC =
+          data.currentDistrictId !== "00000000-0000-0000-0000-000000000000"
+            ? data.currentDistrictId
+            : "";
+        addressData.value.provinceId =
+          data.registrationProvinceId !== "00000000-0000-0000-0000-000000000000"
+            ? data.registrationProvinceId
+            : "";
+        addressData.value.provinceIdC =
+          data.currentProvinceId !== "00000000-0000-0000-0000-000000000000"
+            ? data.currentProvinceId
+            : "";
+        addressData.value.subdistrictId =
+          data.registrationSubDistrictId !==
+          "00000000-0000-0000-0000-000000000000"
+            ? data.registrationSubDistrictId
+            : "";
+        addressData.value.subdistrictIdC =
+          data.currentSubDistrictId !== "00000000-0000-0000-0000-000000000000"
+            ? data.currentSubDistrictId
+            : "";
+        addressData.value.same = data.registrationSame ? "1" : "0";
+        addressData.value.codec = data.currentZipCode;
+        addressData.value.codep = data.registrationZipCode;
+      })
+
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+};
+
+const editData = async () => {
+  const body: ResponseObject = {
+    registrationSame: addressData.value.same == "1",
+    registrationAddress: addressData.value.address,
+    registrationSubDistrictId: addressData.value.subdistrictId,
+    registrationDistrictId: addressData.value.districtId,
+    registrationProvinceId: addressData.value.provinceId,
+    registrationZipCode: codep.value,
+    currentAddress:
+      addressData.value.same == "1"
+        ? addressData.value.address
+        : addressData.value.addressC,
+    currentSubDistrictId:
+      addressData.value.same == "1"
+        ? addressData.value.subdistrictId
+        : addressData.value.subdistrictIdC,
+    currentDistrictId:
+      addressData.value.same == "1"
+        ? addressData.value.districtId
+        : addressData.value.districtIdC,
+    currentProvinceId:
+      addressData.value.same == "1"
+        ? addressData.value.provinceId
+        : addressData.value.provinceIdC,
+    currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
+    createdAt: new Date(),
+    createdFullName: "-",
+  };
+  showLoader();
+  await http
+    .put(config.API.profileAdrsId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await getNewData();
+    });
+};
+
+const addData = async () => {
+  //     showLoader();
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+const saveData = async () => {
+  dialogConfirm($q, () => Datasave());
+};
+const Datasave = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const selectProvince = async (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.districtId = "";
+      addressData.value.subdistrictId = "";
+      addressData.value.codep = "";
+    } else {
+      addressData.value.districtIdC = "";
+      addressData.value.subdistrictIdC = "";
+      addressData.value.codec = "";
+    }
+    myform.value.resetValidation();
+    await fetchDistrict(e, name);
+  }
+};
+
+const selectDistrict = async (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.subdistrictId = "";
+      addressData.value.codep = "";
+    } else {
+      addressData.value.subdistrictIdC = "";
+      addressData.value.codec = "";
+    }
+    myform.value.resetValidation();
+    await fetchSubDistrict(e, name);
+  }
+};
+
+const selectSubDistrict = (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      addressData.value.codep = namecode;
+    } else {
+      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      addressData.value.codec = namecode;
+    }
+  }
+};
+
+const fetchProvince = async () => {
+  showLoader();
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.provinceOps = option;
+      OpsFilter.value.provinceOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchDistrict = async (id: string | null, position: string) => {
+  if (id != null && id != "") {
+    showLoader();
+    await http
+      .get(config.API.listDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: DataOption[] = [];
+        data.map((r: any) => {
+          option.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        if (position == "1") {
+          Ops.value.districtOps = option;
+          OpsFilter.value.districtOps = option;
+        } else {
+          Ops.value.districtCOps = option;
+          OpsFilter.value.districtCOps = option;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const fetchSubDistrict = async (id: string | null, position: string) => {
+  if (id != null && id != "") {
+    showLoader();
+    await http
+      .get(config.API.listSubDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: zipCodeOption[] = [];
+        data.map((r: any) => {
+          option.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+            zipCode: r.zipCode.toString(),
+          });
+        });
+        if (position == "1") {
+          Ops.value.subdistrictOps = option;
+          OpsFilter.value.subdistrictOps = option;
+        } else {
+          Ops.value.subdistrictCOps = option;
+          OpsFilter.value.subdistrictCOps = option;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่"
+      icon="mdi-map-marker"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.address"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codep"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-lg"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-bold"
+            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+          >
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="ใช่"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่"
+            dense
+            :disable="!edit"
+          />
+        </div>
+
+        <div class="col-xs-12" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.addressC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+            :label="`${'ที่อยู่ปัจจุบัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtCOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictCOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codec"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue

@@ -0,0 +1,834 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Certificate";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Certificate";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader ,dialogConfirm} =
+  mixin;
+const route = useRoute();
+const id = ref<string>("");
+const certificateNo = ref<string>();
+const issuer = ref<string>();
+const issueDate = ref<Date>(new Date());
+const expireDate = ref<Date>(new Date());
+const certificateType = ref<string>();
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขใบอนุญาตประกอบอาชีพ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.certicate.columns.length == 0
+  ? (visibleColumns.value = [
+      "certificateType",
+      "certificateNo",
+      "issuer",
+      "issueDate",
+      "expireDate",
+    ])
+  : (visibleColumns.value = profileData.certicate.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "certificateType",
+  "certificateNo",
+  "issuer",
+  "issueDate",
+  "expireDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("certicate", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileCertId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            certificateNo: e.certificateNo,
+            issuer: e.issuer,
+            issueDate: new Date(e.issueDate),
+            expireDate: new Date(e.expireDate),
+            certificateType: e.certificateType,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  certificateNo.value = row.certificateNo;
+  issuer.value = row.issuer;
+  issueDate.value = row.issueDate;
+  expireDate.value = row.expireDate;
+  certificateType.value = row.certificateType;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = () => {
+  dialogConfirm($q,() => SaveData())
+}
+const SaveData = async () => {
+ await myForm.value?.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  showLoader();
+  await http
+    .post(config.API.profileCertId(profileId.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileCertId(id.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileCertId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  certificateNo.value = props.row.certificateNo;
+  issuer.value = props.row.issuer;
+  issueDate.value = props.row.issueDate;
+  expireDate.value = props.row.expireDate;
+  certificateType.value = props.row.certificateType;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  certificateNo.value = "";
+  issuer.value = "";
+  issueDate.value = new Date();
+  expireDate.value = new Date();
+  certificateType.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value =
+    props.profileType == "employee"
+      ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
+      : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileCertHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          certificateNo: e.certificateNo,
+          issuer: e.issuer,
+          issueDate: new Date(e.issueDate),
+          expireDate: new Date(e.expireDate),
+          certificateType: e.certificateType,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+// const validateData = async () => {
+//   checkValidate.value = true;
+//   await myForm.value.validate().then((result: boolean) => {
+//     if (result == false) {
+//       checkValidate.value = false;
+//     }
+//   });
+// };
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<!-- card ใบอนุญาตประกอบอาชีพ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee'
+            ? 'ใบอนุญาตของลูกจ้าง'
+            : 'ใบอนุญาตประกอบอาชีพ'
+        "
+        icon="mdi-book"
+        :statusEdit="statusEdit"
+      >
+        <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 == 'issueDate' || col.name == 'expireDate'"
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ใบอนุญาตของลูกจ้าง'
+              : 'ใบอนุญาตประกอบอาชีพ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateType"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่ใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :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(issueDate)"
+                    :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-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="expireDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @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(expireDate)"
+                    :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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'expireDate' ||
+              col.name == 'issueDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue

@@ -0,0 +1,764 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useQuasar } from "quasar";
+import type { Goverment } from "@/modules/04_registry/components/profileType";
+import { defaultGoverment } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import HistoryTable from "@/components/TableHistory.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { storeToRefs } from "pinia";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+  employeeClass: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+const profileStore = useProfileDataStore();
+const { birthDate, retireText } = storeToRefs(profileStore);
+const edit = ref<boolean>(false);
+const govermentData = ref<Goverment>(defaultGoverment);
+const myform = ref<any>();
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลราชการ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionPathSide",
+    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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionexecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchData();
+  emit("update:statusEdit", false);
+});
+
+watch(birthDate, async () => {
+  await fetchData();
+});
+
+watch(retireText, async () => {
+  govermentData.value.retireDate = retireText.value;
+});
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileGovId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject = res.data.result;
+      govermentData.value.ocId = data.oc;
+      govermentData.value.positionId = data.position;
+      govermentData.value.positionPathSide = data.positionPathSide;
+      govermentData.value.positionLine = data.positionLine;
+      govermentData.value.positionType = data.positionType;
+      govermentData.value.positionLevel = data.positionLevel;
+      govermentData.value.numberId = data.posNo;
+      govermentData.value.positionExecutive = data.positionExecutive;
+      govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
+      govermentData.value.containDate = new Date(data.dateAppoint);
+      govermentData.value.workDate = new Date(data.dateStart);
+      govermentData.value.retireDate = data.retireDate;
+      govermentData.value.absent = data.govAgeAbsent;
+      govermentData.value.age = data.govAgePlus;
+      govermentData.value.ageAll = data.govAge;
+      govermentData.value.reasonSameDate = data.reasonSameDate;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await fetchData();
+};
+
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileGovId(route.params.id.toString()), {
+      dateAppoint: dateToISO(govermentData.value.containDate),
+      dateStart: dateToISO(govermentData.value.workDate),
+      reasonSameDate: govermentData.value.reasonSameDate,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      emit("update:statusEdit", false);
+      edit.value = false;
+      await refreshData();
+    });
+};
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      await editData();
+    } else {
+    }
+  });
+};
+
+const handleDate = async (modelData: Date) => {
+  govermentData.value.containDate = modelData;
+  await fetchCalAgeGov(modelData);
+};
+
+const fetchCalAgeGov = async (date: Date) => {
+  showLoader();
+  const body = {
+    dateAppoint: date,
+  };
+  await http
+    .post(config.API.profileCalGovId(route.params.id.toString()), body)
+    .then((res) => {
+      const result = res.data.result;
+      govermentData.value.ageAll = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileGovHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          oc: e.oc,
+          position: e.position,
+          positionPathSide: e.positionPathSide,
+          posNo: e.posNo,
+          positionLine: e.positionLine,
+          positionType: e.positionType,
+          positionLevel: e.positionLevel,
+          positionExecutive: e.positionExecutive,
+          positionExecutiveSide: e.positionExecutiveSide,
+          dateAppoint: new Date(e.dateAppoint),
+          dateStart: new Date(e.dateStart),
+          retireDate: e.retireDate,
+          govAge: e.govAge,
+          govAgeAbsent: e.govAgeAbsent,
+          govAgePlus: e.govAgePlus,
+          reasonSameDate: e.reasonSameDate,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลราชการ"
+      icon="mdi-account-tie"
+      :save="saveData"
+      :history="true"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ocId"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionId"
+            :label="`${'ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionPathSide"
+            :label="`${'ด้าน/สาขา'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLine"
+            :label="`${'สายงาน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionType"
+            :label="`${'ประเภท'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLevel"
+            :label="`${'ระดับ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutive"
+            :label="`${'ตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-12 q-py-md"><q-separator /></div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.containDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.containDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกวันที่บรรจุ'
+                        : 'กรุณาเลือกวันที่แต่งตั้ง'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
+                }`"
+              >
+                <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-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.workDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.workDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
+                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer'
+                    ? 'เริ่มปฎิบัติราชการ'
+                    : 'วันที่จ้างและแต่งตั้งมีผล'
+                }`"
+              >
+                <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-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            stack-label
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="govermentData.reasonSameDate"
+            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.retireDate"
+            :label="`${'วันเกษียณอายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ageAll"
+            :label="`${'อายุราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.absent"
+            :label="`${'ขาดราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.age"
+            :label="`${'อายุราชการเกื้อกูล'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateAppoint' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue

@@ -0,0 +1,976 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/OldName";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/OldName";
+import type {
+  OldNameOps,
+  DataOption,
+} from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataInformation: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  perfixId: {
+    type: String,
+    required: true,
+  },
+  firstname: {
+    type: String,
+    required: true,
+  },
+  lastname: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const prefixId = ref<string>();
+const firstName = ref<string>();
+const lastName = ref<string>();
+const status = ref<string>();
+const nameFile = ref<string>("");
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(route.params.id.toString());
+const file = ref<string | null>(null);
+const fileUpload = ref<any>([]);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+const Ops = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+const OpsFilter = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+profileData.oldName.columns.length == 0
+  ? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
+  : (visibleColumns.value = profileData.oldName.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("oldName", count);
+});
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+});
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  prefixId.value = row.prefixId;
+  firstName.value = row.firstName;
+  lastName.value = row.lastName;
+  status.value = row.status;
+  file.value = row.file;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("", newFile);
+    if (prefixId.value != undefined)
+      formData.append("prefixId", prefixId.value);
+    if (firstName.value != undefined)
+      formData.append("firstName", firstName.value);
+    if (lastName.value != undefined)
+      formData.append("lastName", lastName.value);
+    if (status.value != undefined) formData.append("status", status.value);
+    showLoader();
+    await http
+      .post(config.API.profileChangeNameId(profileId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        await props.fetchDataInformation();
+      });
+  } else {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาอัปโหลดเอกสารหลักฐาน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  const formData = new FormData();
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    formData.append("", newFile);
+  }
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  showLoader();
+  await http
+    .put(config.API.profileChangeNameId(id.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileChangeNameId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  prefixId.value = props.row.prefixId;
+  firstName.value = props.row.firstName;
+  lastName.value = props.row.lastName;
+  status.value = props.row.status;
+  file.value = props.row.file;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  prefixId.value = props.perfixId;
+  firstName.value = props.firstname;
+  lastName.value = props.lastname;
+  status.value = "";
+  file.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileChangeNameHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fileAdd = async (val: any) => {
+  nameFile.value = val[0].name;
+  fileUpload.value = val;
+};
+
+const openFile = async (val: string | null) => {
+  if (val != null) window.open(val);
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+<template>
+  <div class="col-12">
+    <q-form ref="myForm">
+      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
+        icon="mdi-book"
+        :statusEdit="!statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="statusEdit ? selectData(props) : ''"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'status'" class="table_ellipsis">
+                {{ typeChangeName(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.file != null"
+                color="green"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-file-document-outline"
+                @click="openFile(props.row.file)"
+              />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </div>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
+        <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-6 col-sm-6 col-md-6">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานะการเปลี่ยนชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="status"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานะการเปลี่ยนชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+              />
+            </div>
+            <q-space class="col-6" />
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้าชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'lastName'"
+                :borderless="!edit"
+                v-model="firstName"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'firstName'"
+                :borderless="!edit"
+                v-model="lastName"
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+                :label="`${'นามสกุล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <q-btn
+              v-if="file != null && !edit"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(file)"
+            />
+            <q-uploader
+              v-if="edit"
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+              @added="fileAdd"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    :history="true"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue

@@ -0,0 +1,673 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
+import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+import { useRoute } from "vue-router";
+import type { QTableProps } from "quasar";
+import CurrencyInput from "@/components/CurruncyInput.vue";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => { /* function */},
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const edit = ref<boolean>(false);
+const myform = ref<any>();
+const employeeOc = ref<string>("");
+const codec = ref<string>("");
+const rows = ref<any[]>([]);
+const positionEmployeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const positionEmployeeLineId = ref<string>("");
+const positionEmployeeLineOptions = ref<DataOption[]>([]);
+const positionEmployeePositionId = ref<string>("");
+const positionEmployeePositionOptions = ref<DataOption[]>([]);
+const employeeWage = ref<number>(0);
+const employeeTypeIndividual = ref<string>("");
+const employeeMoneyIncrease = ref<number>(0);
+const employeeMoneyAllowance = ref<number>(0);
+const employeeMoneyEmployee = ref<number>(0);
+const employeeMoneyEmployer = ref<number>(0);
+
+const informaTempData = ref<any>(defaultTempInformation);
+const rowsHistory = ref<any[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "positionEmployeeGroupId",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroupId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLineId",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionEmployeeLineId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionId",
+    align: "left",
+    label: "ชื่อตำแหน่งทางสายงาน",
+    sortable: true,
+    field: "positionEmployeePositionId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeOc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "employeeOc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeWage",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "employeeWage",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeTypeIndividual",
+    align: "left",
+    label: "ประเภทบุคคล",
+    sortable: true,
+    field: "employeeTypeIndividual",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeMoneyIncrease",
+    align: "left",
+    label: "เงินช่วยเหลือการครองชีพชั่วคราว",
+    sortable: true,
+    field: "employeeMoneyIncrease",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeMoneyAllowance",
+    align: "left",
+    label: "เงินช่วยเหลือการครองชีพชั่วคราว",
+    sortable: true,
+    field: "employeeMoneyAllowance",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeMoneyEmployee",
+    align: "left",
+    label: "เงินสมทบประกันสังคม(ลูกจ้าง)",
+    sortable: true,
+    field: "employeeMoneyEmployee",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeMoneyEmployer",
+    align: "left",
+    label: "เงินสมทบประกันสังคม(นายจ้าง)",
+    sortable: true,
+    field: "employeeMoneyEmployer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "employeeMoneyIncrease",
+  "employeeMoneyAllowance",
+  "employeeMoneyEmployee",
+  "employeeMoneyEmployer",
+  "positionEmployeeGroupId",
+  "positionEmployeePositionId",
+  "positionEmployeeLineId",
+  "employeeTypeIndividual",
+  "employeeOc",
+  "employeeWage",
+]);
+
+onMounted(async () => {
+  await fetchData();
+  await fetchDataSelector();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const fetchDataSelector = async () => {
+  showLoader();
+  await fetchEmployeeGroup();
+  await fetchpositionEmployeeLine();
+  await fetchPositionEmployeePosition();
+  hideLoader();
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+// const clickHistory = async () => {
+//   modalHistory.value = true;
+//   showLoader();
+//   await http
+//     .get(config.API.profileEmployeeTempId(route.params.id.toString()))
+//     .then((res) => {
+//       let data = res.data.result;
+//       rowsHistory.value = [];
+//       data.map((e: any) => {
+//         rowsHistory.value.push({
+//           employeeMoneyIncrease: e.employeeMoneyIncrease,
+//           employeeMoneyAllowance: e.employeeMoneyAllowance,
+//           employeeMoneyEmployee: e.employeeMoneyEmployee,
+//           employeeMoneyEmployer: e.employeeMoneyEmployer,
+//           positionEmployeeGroupId: e.positionEmployeeGroupId,
+//           positionEmployeePositionId: e.positionEmployeePositionId,
+//           positionEmployeeLineId: e.positionEmployeeLineId,
+//           employeeTypeIndividual: e.employeeTypeIndividual,
+//           employeeOc: e.employeeOc,
+//           employeeWage: e.employeeWage,
+//           createdFullName: e.createdFullName,
+//           createdAt: new Date(e.createdAt),
+//         });
+//       });
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
+const refreshData = async () => {
+  myform.value.reset();
+  await getNewData();
+};
+
+const getNewData = async () => {
+  await fetchData();
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    showLoader();
+    await http
+      .get(config.API.profileEmployeeTempId(route.params.id.toString()))
+      .then((res) => {
+        // const data: any = res.data.result;
+        // rows.value = [];
+        // data.map((e: any) => {
+        //   rows.value.push({
+        //     employeeMoneyIncrease: e.employeeMoneyIncrease,
+        //     employeeMoneyAllowance: e.employeeMoneyAllowance,
+        //     employeeMoneyEmployee: e.employeeMoneyEmployee,
+        //     employeeMoneyEmployer: e.employeeMoneyEmployer,
+        //     positionEmployeeGroupId: e.positionEmployeeGroupId,
+        //     positionEmployeePositionId: e.positionEmployeePositionId,
+        //     positionEmployeeLineId: e.positionEmployeeLineId,
+        //     employeeTypeIndividual: e.employeeTypeIndividual,
+        //     employeeOc: e.employeeOc,
+        //     employeeWage: e.employeeWage,
+        //   });
+        //   console.log(res);
+        // });
+        const data: any = res.data.result;
+        informaTempData.value.employeeMoneyIncrease =
+          data.employeeMoneyIncrease;
+        informaTempData.value.employeeMoneyAllowance =
+          data.employeeMoneyAllowance;
+        informaTempData.value.employeeMoneyEmployee =
+          data.employeeMoneyEmployee;
+        informaTempData.value.employeeMoneyEmployer =
+          data.employeeMoneyEmployer;
+        informaTempData.value.positionEmployeeGroupId =
+          data.positionEmployeeGroupId !==
+          "00000000-0000-0000-0000-000000000000"
+            ? data.positionEmployeeGroupId
+            : "";
+        informaTempData.value.positionEmployeePositionId =
+          data.positionEmployeePositionId !==
+          "00000000-0000-0000-0000-000000000000"
+            ? data.positionEmployeePositionId
+            : "";
+        informaTempData.value.positionEmployeeLineId =
+          data.positionEmployeeLineId !== "00000000-0000-0000-0000-000000000000"
+            ? data.positionEmployeeLineId
+            : "";
+        informaTempData.value.employeeTypeIndividual =
+          data.employeeTypeIndividual;
+        informaTempData.value.employeeOc = data.employeeOc;
+        informaTempData.value.employeeWage = data.employeeWage;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeGroupOptions.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const fetchpositionEmployeeLine = async () => {
+  await http
+    .get(config.API.positionEmployeeLine)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      positionEmployeeLineOptions.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+//ชื่อตำแหน่ง
+
+const fetchPositionEmployeePosition = async () => {
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      positionEmployeePositionOptions.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const editData = async () => {
+  const body: any = {
+    employeeMoneyIncrease: informaTempData.value.employeeMoneyIncrease,
+    employeeMoneyAllowance: informaTempData.value.employeeMoneyAllowance,
+    employeeMoneyEmployee: informaTempData.value.employeeMoneyEmployee,
+    employeeMoneyEmployer: informaTempData.value.employeeMoneyEmployer,
+    positionEmployeeGroupId: informaTempData.value.positionEmployeeGroupId,
+    positionEmployeePositionId:
+      informaTempData.value.positionEmployeePositionId,
+    positionEmployeeLineId: informaTempData.value.positionEmployeeLineId,
+    employeeTypeIndividual: informaTempData.value.employeeTypeIndividual,
+    employeeOc: informaTempData.value.employeeOc,
+    employeeWage: informaTempData.value.employeeWage,
+  };
+  showLoader();
+  await http
+    .put(config.API.profileEmployeeTempId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await getNewData();
+    });
+};
+
+const addData = async () => {
+  const body: any = {
+    employeeMoneyIncrease: employeeMoneyIncrease.value,
+    employeeMoneyAllowance: employeeMoneyAllowance.value,
+    employeeMoneyEmployee: employeeMoneyEmployee.value,
+    employeeMoneyEmployer: employeeMoneyEmployer.value,
+    positionEmployeeGroupId: positionEmployeeGroupId.value,
+    positionEmployeePositionId: positionEmployeePositionId.value,
+    positionEmployeeLineId: positionEmployeeLineId.value,
+    employeeTypeIndividual: employeeTypeIndividual.value,
+    employeeOc: employeeOc.value,
+    employeeWage: employeeWage.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.profileInforId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+    });
+};
+const saveData = async () => {
+  dialogConfirm($q, () => Datasave());
+};
+const Datasave = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลลูกจ้างชั่วคราว"
+      icon="mdi-account"
+      :save="saveData"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :addEmployee="statusAdd()"
+      :history="!statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12  q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeeGroupId"
+            :label="`${'กลุ่มงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="employeeGroupOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeeLineId"
+            :label="`${'สายงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionEmployeeLineOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeePositionId"
+            :label="`${'ชื่อตำแหน่งทางสายงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionEmployeePositionOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.employeeOc"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.employeeTypeIndividual"
+            :label="`${'ประเภทบุคคล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeWage"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'ค่าจ้าง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyIncrease"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyAllowance"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyEmployee"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyEmployer"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Other.vue

@@ -0,0 +1,622 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Other";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Other";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError, showLoader, hideLoader ,dialogConfirm} = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const detail = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขอื่นๆ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.other.columns.length == 0
+  ? (visibleColumns.value = ["date", "detail"])
+  : (visibleColumns.value = profileData.other.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "detail",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("other", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileOtherId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  detail.value = row.detail;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+ const clickSave =  () => {
+  dialogConfirm($q,()=>SaveData())
+ }
+const SaveData = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileOtherId(profileId.value), {
+        id: id.value,
+        date: date.value,
+        detail: detail.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileOtherId(id.value), {
+      id: id.value,
+      date: date.value,
+      detail: detail.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileOtherId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  detail.value = props.row.detail;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  detail.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileOtherHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: e.date,
+          detail: e.detail,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+// const validateData = async () => {
+//   checkValidate.value = true;
+//   await myForm.value.validate().then((result: boolean) => {
+//     if (result == false) {
+//       checkValidate.value = false;
+//     }
+//   });
+// };
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<!-- card อื่นๆ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="อื่นๆ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <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 == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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(date)"
+                    :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-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Record.vue

@@ -0,0 +1,829 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Record";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Record";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const detail = ref<string>();
+const reference = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>(
+  "ประวัติแก้ไขวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+);
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.record.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.record.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("record", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value != "") {
+    showLoader();
+    await http
+      .get(config.API.profileNopaidId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  detail.value = row.detail;
+  reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileNopaidId(profileId.value), {
+        id: id.value,
+        date: dateToISO(date.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileNopaidId(id.value), {
+      id: id.value,
+      date: dateToISO(date.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileNopaidId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  detail.value = props.row.detail;
+  reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  detail.value = "";
+  reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileNopaidHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+
+<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+        icon="mdi-calendar-remove"
+        :statusEdit="statusEdit"
+      >
+        <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 == 'date' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+          :close="clickClose"
+        />
+        <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-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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(date)"
+                    :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-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/08_registryEmployee/components/EditEmployee/Talent.vue

@@ -0,0 +1,687 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Talent";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Talent";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
+  mixin;
+const route = useRoute();
+const id = ref<string>("");
+const field = ref<string>();
+const detail = ref<string>();
+const remark = ref<string>();
+const reference = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขความสามารถพิเศษ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.talent.columns.length == 0
+  ? (visibleColumns.value = ["field", "detail", "remark", "reference"])
+  : (visibleColumns.value = profileData.talent.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("talent", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileAbiliId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            field: e.field,
+            detail: e.detail,
+            remark: e.remark,
+            reference: e.reference,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  field.value = row.field;
+  detail.value = row.detail;
+  remark.value = row.remark;
+  reference.value = row.reference;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+ const clickSave =  () => {
+  dialogConfirm($q,()=>SaveData())
+ }
+const SaveData = async () => {
+ await myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileAbiliId(profileId.value), {
+        id: id.value,
+        field: field.value,
+        detail: detail.value,
+        remark: remark.value,
+        reference: reference.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileAbiliId(id.value), {
+      id: id.value,
+      field: field.value,
+      detail: detail.value,
+      remark: remark.value,
+      reference: reference.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileAbiliId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  field.value = props.row.field;
+  detail.value = props.row.detail;
+  remark.value = props.row.remark;
+  reference.value = props.row.reference;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  field.value = "";
+  detail.value = "";
+  remark.value = "";
+  reference.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileAbiliHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          field: e.field,
+          detail: e.detail,
+          remark: e.remark,
+          reference: e.reference,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+// const validateData = async () => {
+//   checkValidate.value = true;
+//   await myForm.value.validate().then((result: boolean) => {
+//     if (result == false) {
+//       checkValidate.value = false;
+//     }
+//   });
+// };
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<!-- card ความสามารถพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ความสามารถพิเศษ"
+        icon="mdi-folder-star"
+        :statusEdit="statusEdit"
+      >
+        <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 class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
+                hide-bottom-space
+                :label="`${'ด้าน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="remark"
+                hide-bottom-space
+                :label="`${'หมายเหตุ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+  </div>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Work.vue

@@ -0,0 +1,912 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Work";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Work";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
+  mixin;
+const route = useRoute();
+const id = ref<string>("");
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const detail = ref<string>();
+const reference = ref<string>();
+const minDate = ref<Date>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+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 rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขปฏิบัติราชการพิเศษ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.work.columns.length == 0
+  ? (visibleColumns.value = [
+      "dateStart",
+      "dateEnd",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.work.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(dateStart, (count, prevCount) => {
+  minDate.value = new Date(dateStart.value);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("work", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileDutyId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            dateStart: new Date(e.dateStart),
+            dateEnd: new Date(e.dateEnd),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  dateStart.value = row.dateStart;
+  dateEnd.value = row.dateEnd;
+  detail.value = row.detail;
+  reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+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;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+ const clickSave =  () => {
+  dialogConfirm($q,() => SaveData())
+ }
+const SaveData = async () => {
+ await myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileDutyId(profileId.value), {
+        id: id.value,
+        dateStart: dateToISO(dateStart.value),
+        dateEnd: dateToISO(dateEnd.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  showLoader();
+  await http
+    .put(config.API.profileDutyId(id.value), {
+      id: id.value,
+      dateStart: dateToISO(dateStart.value),
+      dateEnd: dateToISO(dateEnd.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileDutyId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  dateStart.value = props.row.dateStart;
+  dateEnd.value = props.row.dateEnd;
+  detail.value = props.row.detail;
+  reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  dateStart.value = new Date();
+  dateEnd.value = new Date();
+  detail.value = "";
+  reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileDutyHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          dateStart: new Date(e.dateStart),
+          dateEnd: new Date(e.dateEnd),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+// const validateData = async () => {
+//   checkValidate.value = true;
+//   await myForm.value.validate().then((result: boolean) => {
+//     if (result == false) {
+//       checkValidate.value = false;
+//     }
+//   });
+// };
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+
+<!-- card ปฏิบัติราชการพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ปฏิบัติราชการพิเศษ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <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 == 'dateStart' ||
+                  col.name == 'dateEnd' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :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(dateStart)"
+                    :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-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @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(dateEnd)"
+                    :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-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateEnd' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>