diff --git a/src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue b/src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue
deleted file mode 100644
index 1b7a55bbc..000000000
--- a/src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<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>
diff --git a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
deleted file mode 100644
index 52e91c9b3..000000000
--- a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
+++ /dev/null
@@ -1,685 +0,0 @@
-<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 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;
-        informaData.value.birthDate = birth;
-        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-temp");
-};
-</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"
-              for="#cardId"
-              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
-              for="#prefixId"
-              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
-              for="#firstname"
-              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
-              for="#lastname"
-              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="calRetire"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  for="#birthDate"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  :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
-              for="#genderId"
-              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
-              for="#statusId"
-              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
-              for="#nationality"
-              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
-              for="#ethnicity"
-              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
-              for="#religionId"
-              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
-              for="#bloodId"
-              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
-              for="#tel"
-              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
-        for="#submitForm"
-        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
-            for="#profile"
-            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>
diff --git a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
index 9a5f19525..92293ff14 100644
--- a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
+++ b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive } from "vue";
+import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -36,35 +36,39 @@ const props = defineProps({
 });
 
 const formData = reactive<FormDataEmployee>({
-  citizenId: "",
-  prefix: "",
-  rank: "",
-  firstName: "",
-  lastName: "",
-  birthDate: null,
-  gender: "",
-  relationship: "",
-  nationality: "",
-  ethnicity: "",
-  religion: "",
-  bloodGroup: "",
-  phone: "",
+  citizenId: "", //เลขประจำตัวประชาชน
+  prefix: "", //คำนำหน้าชื่อ
+  rank: "", //ยศ
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  birthDate: null, //วัน/เดือน/ปี เกิด
+  gender: "", //เพศ
+  relationship: "", //สถานภาพ
+  nationality: "", //สัญชาติ
+  ethnicity: "", //เชื้อชาติ
+  religion: "", //ศาสนา
+  bloodGroup: "", //หมู่เลือด
+  phone: "", //เบอร์โทร
   employeeClass: "TEMP",
 });
 
-const prefixOpsMain = ref<DataOption[]>([]);
-const prefixOps = ref<DataOption[]>([]);
-const rankOpsMain = ref<DataOption[]>([]);
-const rankOps = ref<DataOption[]>([]);
-const genderOpsMain = ref<DataOption[]>([]);
-const genderOps = ref<DataOption[]>([]);
-const statusOpsMain = ref<DataOption[]>([]);
-const statusOps = ref<DataOption[]>([]);
-const religionOpsMain = ref<DataOption[]>([]);
-const religionOps = ref<DataOption[]>([]);
-const bloodOpsMain = ref<DataOption[]>([]);
-const bloodOps = ref<DataOption[]>([]);
+//ตัวเลือก
+const prefixOpsMain = ref<DataOption[]>([]); //คำนำหน้าชื่อ
+const prefixOps = ref<DataOption[]>([]); //คำนำหน้าชื่อ
+const rankOpsMain = ref<DataOption[]>([]); //ยศ
+const rankOps = ref<DataOption[]>([]); //ยศ
+const genderOpsMain = ref<DataOption[]>([]); //เพศ
+const genderOps = ref<DataOption[]>([]); //เพศ
+const statusOpsMain = ref<DataOption[]>([]); //สถานภาพ
+const statusOps = ref<DataOption[]>([]); //สถานภาพ
+const religionOpsMain = ref<DataOption[]>([]); // ศาสนา
+const religionOps = ref<DataOption[]>([]); //ศาสนา
+const bloodOpsMain = ref<DataOption[]>([]); //หมู่เลือด
+const bloodOps = ref<DataOption[]>([]); //หมู่เลือด
 
+/**
+ * ฟังก์ชันดึงข้อมูลเกี่ยวกับข้อมูลส่วนตัว
+ */
 function fetchDataPerson() {
   showLoader();
   http
@@ -134,6 +138,10 @@ function fetchDataPerson() {
     });
 }
 
+/**
+ * ฟังก์ชันเช็คเลขบัตรประจำตัวซ้ำ
+ * @param citizenId เลขบัตรประจำตัว
+ */
 function changeCardID(citizenId: string | number | null) {
   if (citizenId != null && typeof citizenId == "string") {
     if (citizenId.length == 13 && citizenId) {
@@ -153,7 +161,13 @@ function changeCardID(citizenId: string | number | null) {
   }
 }
 
-const filterSelector = (val: string, update: Function, refData: string) => {
+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update function
+ * @param refData ประเภท
+ */
+function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "prefix":
       update(() => {
@@ -207,14 +221,20 @@ const filterSelector = (val: string, update: Function, refData: string) => {
     default:
       break;
   }
-};
+}
 
+/**
+ * ฟังก์ชันคำนวนอายุ
+ */
 function calculateMaxDate() {
   const today = new Date();
   today.setFullYear(today.getFullYear() - 18);
   return today;
 }
 
+/**
+ * ฟังก์ชันบันทึกข้อมูลลูกจ้างชั่วคราว
+ */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -232,6 +252,9 @@ function onSubmit() {
   });
 }
 
+/**
+ * ฟังก์ชันปืด popup
+ */
 function closeDialog() {
   modal.value = false;
   formData.citizenId = "";
diff --git a/src/modules/08_registryEmployee/components/DialogSelectPos.vue b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
index ef88d7e9a..656fd6acd 100644
--- a/src/modules/08_registryEmployee/components/DialogSelectPos.vue
+++ b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onBeforeMount, onMounted } from "vue";
+import { ref, watch, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
 
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useStructureTree } from "@/stores/structureTree";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -17,10 +19,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useStructureTree } from "@/stores/structureTree";
-
 /** use*/
 const $q = useQuasar();
 const { fetchStructureTree } = useStructureTree();
@@ -48,16 +46,16 @@ const props = defineProps({
 });
 
 /** Tree*/
-const nodeId = ref<string>("");
-const nodeLevel = ref<number>(0);
-const filterTree = ref<string>("");
-const nodes = ref<Array<TreeMain>>([]);
+const nodeId = ref<string>(""); //id  หน่วยงาน/ส่วนราชการ
+const nodeLevel = ref<number>(0); // ระดับ หน่วยงาน/ส่วนราชการ
+const filterTree = ref<string>(""); //คำค้นหาหน่วยงาน/ส่วนราชการ
+const nodes = ref<Array<TreeMain>>([]); //ข้อมูล โครงสร้าง
 const lazy = ref(nodes);
 const expanded = ref<string[]>([]);
 
 /** Table*/
-const filters = ref<string>("");
-const rowsPosition = ref<Position[]>([]);
+const filters = ref<string>(""); // ค้นหาตำแหน่ง
+const rowsPosition = ref<Position[]>([]); //รายการตำแหน่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "isPosition",
@@ -198,12 +196,12 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /** Position*/
-const positionNo = ref<PositionNo[]>([]);
-const positionId = ref<string>("");
-const seletcId = ref<string>("");
-const selectedPos = ref<any[]>([]);
+const positionNo = ref<PositionNo[]>([]); //รายการตำแหน่ง
+const positionId = ref<string>(""); //id ตำแหน่ง
+const seletcId = ref<string>(""); // id ที่ตเ้องการ
+const selectedPos = ref<any[]>([]); //ตำแหน่ง ที่ต้องการ
 const datePos = ref<Date>(new Date());
-const posMasterMain = ref<any>([]);
+const posMasterMain = ref<any>([]); //รายการตำแหน่ง
 const orgRevisionId = ref<string>("");
 const isLoad = ref<boolean>(false);
 /**
@@ -322,7 +320,9 @@ async function fetchPosFind(level: number, id: string) {
     });
 }
 
-/** function บันทึกข้อมูลตำแหน่ง*/
+/**
+ * function บันทึกข้อมูลตำแหน่ง
+ */
 async function onClickSubmit() {
   const dataPosMaster = await posMasterMain.value?.find(
     (e: any) => e.id === positionId.value
@@ -365,13 +365,17 @@ async function onClickSubmit() {
   }
 }
 
-/** function closePopup*/
+/**
+ * function closePopup
+ */
 function closePopup() {
   modal.value = !modal.value;
   clearData();
 }
 
-/** function clearData*/
+/**
+ * function clearData
+ */
 async function clearData() {
   nodeId.value = "";
   expanded.value = [];
@@ -392,6 +396,10 @@ function filterItemsTaps(data: any[]) {
   return orgTreeIds;
 }
 
+/**
+ * function เลือกตำแหน่ง
+ * @param id ที่ต้องการ
+ */
 async function onClickSelectPos(id: string) {
   positionId.value = id;
   selectedPos.value = [];
@@ -425,6 +433,9 @@ watch(
   }
 );
 
+/**
+ * ทำงานเมื่อเลือก แสดงตำแหน่งทั้งหมด
+ */
 watch(
   () => isAll.value,
   (value, oldVal) => {
@@ -434,6 +445,9 @@ watch(
   }
 );
 
+/**
+ * ทำงานเมื่อเลือก แสดงเฉพาะตำแหน่งว่าง
+ */
 watch(
   () => isBlank.value,
   (value, oldVal) => {
diff --git a/src/modules/08_registryEmployee/components/DialogSendOrder.vue b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
index a909f994a..3d48bd16a 100644
--- a/src/modules/08_registryEmployee/components/DialogSendOrder.vue
+++ b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -11,10 +14,6 @@ import type { DataEmployee } from "@/modules/08_registryEmployee/interface/respo
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** inportStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
-
 const $q = useQuasar();
 const {
   success,
@@ -36,9 +35,9 @@ const props = defineProps({
   },
 });
 
-const filter = ref<string>("");
-const rows = ref<DataEmployee[]>([]);
-const selected = ref<DataEmployee[]>([]);
+const filter = ref<string>(""); //ค้นหารายชื่อไปออกคำสั่ง
+const rows = ref<DataEmployee[]>([]); //รายชื่อไปออกคำสั่ง
+const selected = ref<DataEmployee[]>([]); //รายชื่อที่เลือกไปออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -165,6 +164,9 @@ const visibleColumns = ref<String[]>([
   "statustext",
 ]);
 
+/**
+ * ฟังก์ชันยืนยันการส่งออกคำสั่ง
+ */
 function onClickSendOrder() {
   if (selected.value.length == 0) {
     dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
@@ -200,6 +202,9 @@ function onClickSendOrder() {
   }
 }
 
+/**
+ * ฟังก์ชันดึงข้อมูลราชชื่อส่งออกคำสั่ง
+ */
 function fetchList() {
   showLoader();
   http
@@ -215,11 +220,19 @@ function fetchList() {
     });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ */
 function closeDialog() {
   modal.value = false;
   selected.value = [];
 }
 
+/**
+ * ทำเมื่อ modal เป็น true
+ *
+ * ทำการเรียก fetchList  เพื่อข้อมูลราชชื่อส่งออกคำสั่ง
+ */
 watch(
   () => modal.value,
   () => {
diff --git a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
deleted file mode 100644
index 522a2bbc7..000000000
--- a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
+++ /dev/null
@@ -1,476 +0,0 @@
-<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(async () => {
-      await props.fetchNewList();
-      await success($q, "บันทึกสำเร็จ");
-      props.closeDialog();
-      selected.value = [];
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      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();
-    visibleColumnsOrder.value = [
-      "no",
-      "fullname",
-      "fullnameOld",
-      "oc",
-      "positionEmployeePosition",
-      "positionEmployeePositionSide",
-      "positionLine",
-      "govAge",
-      "positionEmployeeGroup",
-      "dateAppoint",
-      "refSalary",
-      "dateStart",
-      "createdAt",
-      "salaryDate",
-      "age",
-      "amount",
-      "statustext",
-      "leaveDateOrder",
-      "newAgency",
-      "currentAgency",
-    ];
-  }
-});
-</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-select
-                v-model="visibleColumnsOrder"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columnsOrder"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue b/src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
deleted file mode 100644
index 8cd904c7e..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
+++ /dev/null
@@ -1,989 +0,0 @@
-<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
-                    :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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue b/src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
deleted file mode 100644
index ed4899acb..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
+++ /dev/null
@@ -1,950 +0,0 @@
-<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
-                    :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
-                    :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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Document.vue b/src/modules/08_registryEmployee/components/EditEmployee/Document.vue
deleted file mode 100644
index 8a018a3c9..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Document.vue
+++ /dev/null
@@ -1,300 +0,0 @@
-<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");
-      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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Education.vue b/src/modules/08_registryEmployee/components/EditEmployee/Education.vue
deleted file mode 100644
index 72df895cf..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Education.vue
+++ /dev/null
@@ -1,1572 +0,0 @@
-<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/Education";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Education";
-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 { EduOps } from "@/modules/04_registry/interface/index/Main";
-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 {
-  success,
-  dateToISO,
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-const route = useRoute();
-const id = ref<string>("");
-const levelId = ref<string>();
-const Ops = ref<EduOps>({
-  levelOptions: [],
-  positionPathOptions: [],
-});
-const OpsFilter = ref<EduOps>({
-  levelOptions: [],
-  positionPathOptions: [],
-});
-const isEducation = ref<boolean>();
-const institute = ref<string>();
-const degree = ref<string>();
-const field = ref<string>();
-const gpa = ref<string>();
-const country = ref<string>();
-const duration = ref<string>();
-const durationYear = ref<number>(0);
-const other = ref<string>();
-const fundName = ref<string>();
-const isDate = ref<string | null>("true");
-const finishDate = ref<Date>(new Date());
-const startDate = ref<number>(new Date().getFullYear());
-const startDate2 = ref<Date>(new Date());
-const endDate = ref<number>(new Date().getFullYear());
-const endDate2 = ref<Date>(new Date());
-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.education.columns.length == 0
-  ? (visibleColumns.value = [
-      "level",
-      "institute",
-      "degree",
-      "field",
-      "gpa",
-      "country",
-      "duration",
-      "durationYear",
-      "other",
-      "fundName",
-      "isEducation",
-      "finishDate",
-      "startDate",
-      "endDate",
-    ])
-  : (visibleColumns.value = profileData.education.columns);
-const columns = ref<QTableProps["columns"]>([
-  {
-    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: "institute",
-    align: "left",
-    label: "สถานศึกษา",
-    sortable: true,
-    field: "institute",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "ถึง",
-    sortable: true,
-    field: "endDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "finishDate",
-    align: "left",
-    label: "วันที่สำเร็จการศึกษา",
-    sortable: true,
-    field: "finishDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isEducation",
-    align: "left",
-    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-    sortable: true,
-    field: "isEducation",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "degree",
-    align: "left",
-    label: "วุฒิการศึกษา",
-    sortable: true,
-    field: "degree",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "field",
-    align: "left",
-    label: "สาขาวิชา/ทาง",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fundName",
-    align: "left",
-    label: "ทุน",
-    sortable: true,
-    field: "fundName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gpa",
-    align: "left",
-    label: "เกรดเฉลี่ย",
-    sortable: true,
-    field: "gpa",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "country",
-    align: "left",
-    label: "ประเทศ",
-    sortable: true,
-    field: "country",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "other",
-    align: "left",
-    label: "ข้อมูลการติดต่อ",
-    sortable: true,
-    field: "other",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "ระยะเวลา",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "durationYear",
-    align: "left",
-    label: "ระยะเวลาหลักสูตร",
-    sortable: true,
-    field: "durationYear",
-    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: "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: "institute",
-    align: "left",
-    label: "สถานศึกษา",
-    sortable: true,
-    field: "institute",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "ถึง",
-    sortable: true,
-    field: "endDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "finishDate",
-    align: "left",
-    label: "วันที่สำเร็จการศึกษา",
-    sortable: true,
-    field: "finishDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isEducation",
-    align: "left",
-    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-    sortable: true,
-    field: "isEducation",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "degree",
-    align: "left",
-    label: "วุฒิการศึกษา",
-    sortable: true,
-    field: "degree",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "field",
-    align: "left",
-    label: "สาขาวิชา/ทาง",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fundName",
-    align: "left",
-    label: "ทุน",
-    sortable: true,
-    field: "fundName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gpa",
-    align: "left",
-    label: "เกรดเฉลี่ย",
-    sortable: true,
-    field: "gpa",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "country",
-    align: "left",
-    label: "ประเทศ",
-    sortable: true,
-    field: "country",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "other",
-    align: "left",
-    label: "ข้อมูลการติดต่อ",
-    sortable: true,
-    field: "other",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "ระยะเวลา",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "durationYear",
-    align: "left",
-    label: "ระยะเวลาหลักสูตร",
-    sortable: true,
-    field: "durationYear",
-    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",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "isEducation",
-  "fundName",
-  "finishDate",
-  "startDate",
-  "endDate",
-  "createdFullName",
-  "createdAt",
-]);
-
-watch(startDate, (count, prevCount) => {
-  minDate.value = new Date(`${startDate.value}-01-01`);
-});
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("education", count);
-});
-
-onMounted(async () => {
-  await fetchLevel();
-  await fetchPositionPath();
-  await fetchData();
-});
-
-const fetchLevel = async () => {
-  showLoader();
-  await http
-    .get(config.API.educationLevel)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      Ops.value.levelOptions = option;
-      OpsFilter.value.levelOptions = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchPositionPath = async () => {
-  showLoader();
-  await http
-    .get(config.API.positionPath)
-    .then((res) => {
-      const data = res.data.result;
-      let option: any = [];
-      //   data.map((r: DataOption) => {
-      option.push({ id: true, name: "ใช่" });
-      option.push({ id: false, name: "ไม่ใช่" });
-      //   });
-      Ops.value.positionPathOptions = option;
-      OpsFilter.value.positionPathOptions = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "levelOptions":
-      update(() => {
-        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "positionPathOptions":
-      update(() => {
-        Ops.value.positionPathOptions =
-          OpsFilter.value.positionPathOptions.filter(
-            (v: DataOption) => v.name.indexOf(val) > -1
-          );
-      });
-      break;
-    default:
-      break;
-  }
-};
-
-const fetchData = async () => {
-  if (profileId.value) {
-    showLoader();
-    await http
-      .get(config.API.profileEduId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            level: e.educationLevel,
-            levelId: e.educationLevelId,
-            positionPath: e.positionPath,
-            isEducation: e.isEducation,
-            institute: e.institute,
-            degree: e.degree,
-            field: e.field,
-            gpa: e.gpa,
-            country: e.country,
-            duration: e.duration,
-            durationYear: e.durationYear,
-            other: e.other,
-            fundName: e.fundName,
-            isDate: e.isDate == null ? null : e.isDate.toString(),
-            finishDate: new Date(e.finishDate),
-            startDate: new Date(e.startDate).getFullYear(),
-            endDate: new Date(e.endDate).getFullYear(),
-            startDate2: new Date(e.startDate),
-            endDate2: new Date(e.endDate),
-            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];
-  levelId.value = row.levelId;
-  isEducation.value = row.isEducation;
-  institute.value = row.institute;
-  degree.value = row.degree;
-  field.value = row.field;
-  gpa.value = row.gpa;
-  country.value = row.country;
-  duration.value = row.duration;
-  durationYear.value = row.durationYear;
-  other.value = row.other;
-  fundName.value = row.fundName;
-  finishDate.value = row.finishDate;
-  isDate.value = row.isDate;
-  startDate.value = row.startDate;
-  endDate.value = row.endDate;
-  startDate2.value = row.startDate2;
-  endDate2.value = row.endDate2;
-  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 () => {
-  //   const filter = OpsFilter.value.levelOptions.filter(
-  //     (r: any) => r.id == levelId.value
-  //   );
-  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-  //     (r: any) => r.id == isEducation.value
-  //   );
-  if (profileId.value) {
-    showLoader();
-    await http
-      .post(config.API.profileEduId(profileId.value), {
-        id: id.value,
-        //   educationLevel: filter[0].name,
-        educationLevelId: levelId.value,
-        isEducation: isEducation.value,
-        institute: institute.value,
-        degree: degree.value,
-        field: field.value,
-        gpa: gpa.value,
-        country: country.value,
-        duration: duration.value,
-        durationYear: durationYear.value,
-        other: other.value,
-        fundName: fundName.value,
-        isDate: isDate.value == "true" ? true : false,
-        finishDate: dateToISO(finishDate.value),
-        startDate:
-          isDate.value == "true"
-            ? dateToISO(startDate2.value)
-            : new Date(`${startDate.value}-01-01`),
-        endDate:
-          isDate.value == "true"
-            ? dateToISO(endDate2.value)
-            : new Date(`${endDate.value}-01-01`),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
-};
-
-/**
- * บันทึกแก้ไขข้อมูล
- */
-const editData = async () => {
-  //   const filter = OpsFilter.value.levelOptions.filter(
-  //     (r: any) => r.id == levelId.value
-  //   );
-  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-  //     (r: any) => r.id == isEducation.value
-  //   );
-  showLoader();
-  await http
-    .put(config.API.profileEduId(id.value), {
-      id: id.value,
-      //   educationLevel: filter[0].name,
-      educationLevelId: levelId.value,
-      isEducation: isEducation.value,
-      institute: institute.value,
-      degree: degree.value,
-      field: field.value,
-      gpa: gpa.value,
-      country: country.value,
-      duration: duration.value,
-      durationYear: durationYear.value,
-      other: other.value,
-      fundName: fundName.value,
-      isDate: isDate.value == "true" ? true : false,
-      finishDate: dateToISO(finishDate.value),
-      startDate:
-        isDate.value == "true"
-          ? dateToISO(startDate2.value)
-          : new Date(`${startDate.value}-01-01`),
-      endDate:
-        isDate.value == "true"
-          ? dateToISO(endDate2.value)
-          : new Date(`${endDate.value}-01-01`),
-    })
-    .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.profileEduId(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;
-  levelId.value = _props.row.levelId;
-  isEducation.value = _props.row.isEducation;
-  institute.value = _props.row.institute;
-  degree.value = _props.row.degree;
-  field.value = _props.row.field;
-  gpa.value = _props.row.gpa;
-  country.value = _props.row.country;
-  duration.value = _props.row.duration;
-  durationYear.value = _props.row.durationYear;
-  other.value = _props.row.other;
-  fundName.value = _props.row.fundName;
-  finishDate.value = _props.row.finishDate;
-  isDate.value = _props.row.isDate;
-  startDate.value = _props.row.startDate;
-  endDate.value = _props.row.endDate;
-  startDate2.value = _props.row.startDate2;
-  endDate2.value = _props.row.endDate2;
-  id.value = _props.row.id;
-  await checkRowPage();
-};
-
-/**
- * กดปุ่มเพิ่มบน table
- */
-const addData = () => {
-  modalEdit.value = false;
-  modal.value = true;
-  edit.value = true;
-  levelId.value = "";
-  isEducation.value = false;
-  institute.value = "";
-  degree.value = "";
-  field.value = "";
-  gpa.value = "";
-  country.value = "";
-  duration.value = "";
-  durationYear.value = 0;
-  other.value = "";
-  fundName.value = "";
-  isDate.value = "true";
-  finishDate.value = new Date();
-  startDate.value = new Date().getFullYear();
-  endDate.value = new Date().getFullYear();
-  startDate2.value = new Date();
-  endDate2.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.profileEduHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          level: e.educationLevel,
-          levelId: e.educationLevelId,
-          positionPath: e.positionPath,
-          isEducation: e.isEducation,
-          institute: e.institute,
-          degree: e.degree,
-          field: e.field,
-          gpa: e.gpa,
-          country: e.country,
-          duration: e.duration,
-          durationYear: e.durationYear,
-          other: e.other,
-          fundName: e.fundName,
-          isDate: e.isDate,
-          finishDate: new Date(e.finishDate),
-          startDate: new Date(e.startDate).getFullYear(),
-          endDate: new Date(e.endDate).getFullYear(),
-          startDate2: new Date(e.startDate2),
-          endDate2: new Date(e.endDate2),
-          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="school"
-        :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 == 'startDate'" class="table_ellipsis">
-                {{
-                  props.row.isDate == "true"
-                    ? date2Thai(props.row.startDate2)
-                    : col.value + 543
-                }}
-              </div>
-              <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
-                {{
-                  props.row.isDate == "true"
-                    ? date2Thai(props.row.endDate2)
-                    : col.value + 543
-                }}
-              </div>
-              <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
-                {{ 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">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="levelId"
-                :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:any,
-                      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="institute"
-                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-                hide-bottom-space
-                :label="`${'สถานศึกษา'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
-                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
-                  <q-radio
-                    v-model="isDate"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    val="false"
-                    label="ปี"
-                    dense
-                    :disable="!edit"
-                  />
-                  <q-radio
-                    v-model="isDate"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    val="true"
-                    label="วัน/เดือน/ปี"
-                    dense
-                    :disable="!edit"
-                  />
-                </div>
-                <div class="col-12 row q-col-gutter-sm">
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      v-if="isDate === 'false'"
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="startDate"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :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
-                          :borderless="!edit"
-                          :model-value="startDate + 543"
-                          :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>
-                    <datepicker
-                      v-else
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="startDate2"
-                      :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
-                          :borderless="!edit"
-                          :model-value="date2Thai(startDate2)"
-                          :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
-                      v-if="isDate === 'false'"
-                      menu-class-name="modalfix"
-                      v-model="endDate"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :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
-                          :borderless="!edit"
-                          :model-value="endDate + 543"
-                          :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>
-                    <datepicker
-                      v-else
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="endDate2"
-                      :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
-                          :borderless="!edit"
-                          :model-value="date2Thai(endDate2)"
-                          :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>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="finishDate"
-                :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
-                    :borderless="!edit"
-                    :model-value="date2Thai(finishDate)"
-                    :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">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="isEducation"
-                hide-bottom-space
-                :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.positionPathOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
-                      ) "
-              />
-            </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="degree"
-                :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="field"
-                :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="fundName"
-                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="gpa"
-                :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="country"
-                :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="other"
-                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="duration"
-                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="durationYear"
-                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร'}`]"
-                hide-bottom-space
-                :label="`${'ระยะเวลาหลักสูตร'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </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 == 'startDate'" class="table_ellipsis">
-            {{
-              props.row.isDate == true
-                ? date2Thai(props.row.startDate2)
-                : col.value + 543
-            }}
-          </div>
-          <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
-            {{
-              props.row.isDate == true
-                ? date2Thai(props.row.endDate2)
-                : col.value + 543
-            }}
-          </div>
-          <div
-            v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
-            {{ 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;
-}
-.borderCard {
-  border: 1px solid #d0d0d0;
-}
-</style>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue b/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
deleted file mode 100644
index 6cd103233..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
+++ /dev/null
@@ -1,625 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-
-import type { QTableProps } from "quasar";
-import type {
-  FormEmployment,
-  FormEmploymentRef,
-  EmploymentList,
-  Respones,
-} from "@/modules/08_registryEmployee/interface/response/Main";
-
-const $q = useQuasar();
-const route = useRoute();
-const maxin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  dialogRemove,
-  success,
-  messageError,
-  hideLoader,
-  showLoader,
-} = maxin;
-const profileId = ref<string>(route.params.id.toString());
-
-const rows = ref<EmploymentList[]>([]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "dateEmployment",
-    align: "left",
-    label: "วันที่จ้าง",
-    sortable: false,
-    field: "dateEmployment",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "orderEmployment",
-    align: "left",
-    label: "คำสั่งจ้าง",
-    sortable: false,
-    field: "orderEmployment",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const visibleColumns = ref<string[]>(["dateEmployment", "orderEmployment"]);
-const filter = ref<string>();
-onMounted(async () => {
-  await fetchList();
-});
-
-async function fetchList() {
-  showLoader();
-  await http
-    .get(config.API.employmentId(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      const list: EmploymentList[] = data.map((e: Respones) => ({
-        id: e.id,
-        orderEmployment: e.command,
-        dateEmployment: date2Thai(e.date),
-        dataISO: e.date,
-      }));
-      rows.value = list;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-// เพิ่มข้อมูลการจ้าง
-const modal = ref<boolean>(false);
-const formData = reactive<FormEmployment>({
-  dateEmployment: null,
-  orderEmployment: "",
-});
-const dateEmploymentRef = ref<object | null>();
-const orderEmploymentRef = ref<object | null>();
-const formDataRef: FormEmploymentRef = {
-  dateEmployment: dateEmploymentRef,
-  orderEmployment: orderEmploymentRef,
-};
-
-function onClickAdd() {
-  modal.value = true;
-  actions.value = "";
-  formData.dateEmployment = null;
-  formData.orderEmployment = "";
-}
-function colsePopup() {
-  modal.value = false;
-  modalHistory.value = false;
-}
-// validateForm
-function validateForm() {
-  const hasError = [];
-  for (const key in formDataRef) {
-    if (Object.prototype.hasOwnProperty.call(formDataRef, key)) {
-      const property = formDataRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    console.log(formData);
-    if (actions.value == "edit") {
-      onSubmitEdit();
-    } else onSubmit();
-  } else {
-    console.log("ไม่ผ่าน ");
-  }
-}
-// การเพิ่ม
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      const data = {
-        command: formData.orderEmployment,
-        date: formData.dateEmployment,
-      };
-      await http
-        .post(config.API.employmentId(profileId.value), data)
-        .then(async () => {
-          await fetchList();
-          success($q, "บันทึกข้อมูลสำเร็จ");
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          colsePopup();
-        });
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-// การลบ
-function cilckDelete(id: string) {
-  dialogRemove(
-    $q,
-    async () => {
-      await http
-        .delete(config.API.employmentId(id))
-        .then(async () => {
-          await fetchList();
-          success($q, "ลบข้อมูลสำเร็จ");
-        })
-        .catch((err) => {
-          messageError($q, err);
-        });
-    },
-    "ยืนยันการลบข้อมูล",
-    "ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
-  );
-}
-// การแก้ไข
-const actions = ref<string>("");
-const employmentRowId = ref<string>("");
-function clickEdit(data: any, actionstype: string) {
-  modal.value = true;
-  actions.value = actionstype;
-  employmentRowId.value = data.id;
-  formData.dateEmployment = data.dataISO;
-  formData.orderEmployment = data.orderEmployment;
-}
-function onSubmitEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      const data = {
-        command: formData.orderEmployment,
-        date: formData.dateEmployment,
-      };
-      await http
-        .put(config.API.employmentId(employmentRowId.value), data)
-        .then(async () => {
-          await fetchList();
-          success($q, "บันทึกข้อมูลสำเร็จ");
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          colsePopup();
-        });
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-// ประวัติการแก้ไข
-const modalHistory = ref<boolean>(false);
-const rowsHis = ref<EmploymentList[]>([]);
-const columnsHis = ref<QTableProps["columns"]>([
-  {
-    name: "dateEmployment",
-    align: "left",
-    label: "วันที่จ้าง",
-    sortable: false,
-    field: "dateEmployment",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "orderEmployment",
-    align: "left",
-    label: "คำสั่งจ้าง",
-    sortable: false,
-    field: "orderEmployment",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  // {
-  //   name: "createdFullName",
-  //   align: "left",
-  //   label: "ผู้สร้าง",
-  //   sortable: false,
-  //   field: "createdFullName",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "createdAt",
-  //   align: "left",
-  //   label: "วันที่สร้าง",
-  //   sortable: false,
-  //   field: "createdAt",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: false,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: false,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const visibleColumnsHis = ref<string[]>([
-  "dateEmployment",
-  "orderEmployment",
-  // "createdFullName",
-  // "createdAt",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const filterHis = ref<string>();
-async function openPopupHistory(id: string) {
-  modalHistory.value = true;
-  filterHis.value = "";
-  showLoader();
-  await http
-    .get(config.API.employmentHistoryId(id))
-    .then((res) => {
-      const data = res.data.result;
-      const list: EmploymentList[] = data.map((e: Respones) => ({
-        id: e.id,
-        orderEmployment: e.command,
-        dateEmployment: date2Thai(e.date),
-        createdFullName: e.createdFullName,
-        createdAt: date2Thai(e.createdAt),
-        lastUpdateFullName: e.lastUpdateFullName,
-        lastUpdatedAt: date2Thai(e.lastUpdatedAt),
-      }));
-      rowsHis.value = list;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-const pagination = ref({
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationHis = ref({
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-</script>
-
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <div class="flex items-center">
-      <div class="flex items-center">
-        <q-icon
-          name="mdi-clipboard"
-          size="1.5em"
-          color="grey-5"
-          class="q-mr-md"
-        />
-
-        <div class="text-bold text-subtitle2 col-12 row items-center">
-          ข้อมูลการจ้าง
-        </div>
-      </div>
-      <div class="q-gutter-sm q-mx-sm">
-        <q-btn
-          size="12px"
-          flat
-          round
-          color="primary"
-          @click="onClickAdd"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
-        </q-btn>
-      </div>
-
-      <q-space />
-      <div class="q-gutter-sm" style="display: flex">
-        <q-input
-          outlined
-          dense
-          v-model="filter"
-          label="ค้นหา"
-          style="min-width: 150px"
-        />
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
-    </div>
-    <div class="q-mt-sm">
-      <d-table
-        flat
-        bordered
-        id="table"
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        :filter="filter"
-        row-key="dateEmployment"
-        :paging="true"
-        dense
-        :visible-columns="visibleColumns"
-        v-model:pagination="pagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width></q-th>
-            <q-th auto-width></q-th>
-            <q-th auto-width></q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td>
-              <q-btn
-                dense
-                flat
-                round
-                color="primary"
-                icon="mdi-pencil"
-                @click="clickEdit(props.row, 'edit')"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td>
-              <q-btn
-                dense
-                flat
-                round
-                color="red"
-                icon="mdi-delete"
-                @click="cilckDelete(props.row.id)"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-              >
-            </q-td>
-            <q-td>
-              <q-btn
-                dense
-                flat
-                round
-                color="info"
-                @click="openPopupHistory(props.row.id)"
-                icon="mdi-history"
-              >
-                <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="modal">
-    <q-card style="width: 700px; max-width: 80vw">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle1 text-weight-bold">
-          <span style="margin-right: 0" v-if="actions == 'edit'">
-            แก้ข้อมูลการจ้าง
-          </span>
-          <span style="margin-right: 0" v-else> เพิ่มข้อมูลการจ้าง </span>
-        </q-toolbar-title>
-        <q-btn
-          for="closeDialog"
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup"
-        />
-      </q-toolbar>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-section class="q-pt-none">
-          <div class="col-12 row q-pa-md">
-            <div
-              class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
-            >
-              <div class="col-xs-12 col-sm-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="formData.dateEmployment"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      for="inputdateEmployment"
-                      ref="dateEmploymentRef"
-                      outlined
-                      dense
-                      class="full-width datepicker"
-                      :model-value="
-                        formData.dateEmployment != null
-                          ? date2Thai(formData.dateEmployment)
-                          : null
-                      "
-                      label="วันที่จ้าง"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-
-              <div class="col-xs-12 col-sm-6">
-                <q-input
-                  for="inputOrderEmployment"
-                  ref="orderEmploymentRef"
-                  dense
-                  outlined
-                  v-model="formData.orderEmployment"
-                  label="คำสั่งจ้าง"
-                  :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
-                  lazy-rules
-                />
-              </div>
-            </div>
-          </div>
-          <div class="row col-12">
-            <q-space />
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn
-            for="ButtonOnSubmit"
-            id="onSubmit"
-            flat
-            round
-            color="secondary"
-            icon="mdi-content-save-outline"
-            type="submit"
-            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-
-  <q-dialog v-model="modalHistory">
-    <q-card style="width: 800px; max-width: 80vw">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle1 text-weight-bold">
-          <span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
-        </q-toolbar-title>
-        <q-btn
-          for="closeDialog"
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup"
-        />
-      </q-toolbar>
-      <q-separator />
-
-      <q-card-section class="q-pt-none q-mt-sm">
-        <q-toolbar class="q-pa-none">
-          <q-space />
-          <div class="q-gutter-sm" style="display: flex">
-            <q-input
-              outlined
-              dense
-              v-model="filterHis"
-              label="ค้นหา"
-              style="min-width: 150px"
-            />
-
-            <q-select
-              v-model="visibleColumnsHis"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columnsHis"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-        </q-toolbar>
-        <d-table
-          flat
-          bordered
-          id="table"
-          ref="table"
-          :columns="columnsHis"
-          :rows="rowsHis"
-          :filter="filterHis"
-          row-key="dateEmployment"
-          :paging="true"
-          dense
-          :visible-columns="visibleColumnsHis"
-          v-model:pagination="paginationHis"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
deleted file mode 100644
index e0e9dfe94..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
+++ /dev/null
@@ -1,909 +0,0 @@
-<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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
deleted file mode 100644
index f16d5fcdf..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
+++ /dev/null
@@ -1,837 +0,0 @@
-<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
-                    :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
-                    :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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
deleted file mode 100644
index 932c6d002..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
+++ /dev/null
@@ -1,1510 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useQuasar } from "quasar";
-import type {
-  Family,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
-import type {
-  ResponseObject,
-  childrenFamily,
-  ResponseHistory,
-} from "@/modules/04_registry/interface/response/Family";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-
-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 route = useRoute();
-const $q = useQuasar();
-
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-const edit = ref<boolean>(false);
-const fix = ref<boolean>(true);
-const myform = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const indexRow = ref<number>(0);
-const previous = ref<boolean>(false);
-const next = ref<boolean>(false);
-//C Couple
-//M Male
-//F Female
-const familyData = ref<Family>({
-  prefixC: null,
-  prefixIdC: null,
-  firstnameC: null,
-  lastnameC: null,
-  lastnameCOld: null,
-  occupationC: null,
-  liveC: null,
-  citizenIdC: null,
-  prefixM: null,
-  prefixIdM: null,
-  firstnameM: null,
-  lastnameM: null,
-  occupationM: null,
-  liveM: null,
-  citizenIdM: null,
-  prefixF: null,
-  prefixIdF: null,
-  firstnameF: null,
-  lastnameF: null,
-  occupationF: null,
-  liveF: null,
-  citizenIdF: null,
-  same: "0",
-  childrens: [],
-});
-const familyDataHistory = ref<ResponseHistory[]>([]);
-const Ops = ref<any>({
-  prefixOps: [],
-});
-const OpsFilter = ref<any>({
-  prefixOps: [],
-});
-
-onMounted(async () => {
-  await fetchPrefix();
-  await fetchData();
-  emit("update:statusEdit", false);
-  defaultAdd();
-});
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    familyData.value = {
-      prefixC: null,
-      prefixIdC: null,
-      firstnameC: null,
-      lastnameC: null,
-      lastnameCOld: null,
-      occupationC: null,
-      citizenIdC: null,
-      liveC: null,
-      prefixM: null,
-      prefixIdM: null,
-      firstnameM: null,
-      lastnameM: null,
-      occupationM: null,
-      citizenIdM: null,
-      liveM: null,
-      prefixF: null,
-      prefixIdF: null,
-      firstnameF: null,
-      lastnameF: null,
-      occupationF: null,
-      citizenIdF: null,
-      liveF: null,
-      same: "0",
-      childrens: [],
-    };
-  }
-};
-
-const historyData = async () => {
-  await fetchHistory();
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  update(() => {
-    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
-      (v: DataOption) => v.name.indexOf(val) > -1
-    );
-  });
-};
-
-const refreshData = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
-};
-
-const fetchPrefix = async () => {
-  showLoader();
-  await http
-    .get(config.API.prefix)
-    .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.prefixOps = option;
-      OpsFilter.value.prefixOps = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const addChildren = async () => {
-  familyData.value.childrens.push({
-    id: `${familyData.value.childrens.length + 1}`,
-    childrenPrefixId: "",
-    childrenFirstName: "",
-    childrenLastName: "",
-    childrenCareer: "",
-    childrenLive: "1",
-    childrenCitizenId: "",
-  });
-
-  familyData.value.childrens.sort(
-    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
-  );
-};
-
-const deleteChildren = (items: childrenFamily) => {
-  const index = familyData.value.childrens.findIndex(
-    (r: childrenFamily) => r.id == items.id
-  );
-
-  familyData.value.childrens.splice(index, 1);
-};
-
-const fetchHistory = async () => {
-  familyDataHistory.value = [];
-  showLoader();
-  await http
-    .get(config.API.profileFamiHisId(route.params.id.toString()))
-    .then((res) => {
-      const data: ResponseObject[] = res.data.result;
-      data.map((row: ResponseObject) => {
-        const arrayData: ResponseHistory = {
-          couple: row.couple ? "1" : "0",
-          couplePrefixId: row.couplePrefixId,
-          coupleFirstName: row.coupleFirstName,
-          coupleLastName: row.coupleLastName,
-          coupleLastNameOld: row.coupleLastNameOld,
-          coupleCareer: row.coupleCareer,
-          coupleLive: row.coupleLive ? "1" : "0",
-          coupleCitizenId: row.coupleCitizenId,
-          fatherPrefixId: row.fatherPrefixId,
-          fatherFirstName: row.fatherFirstName,
-          fatherLastName: row.fatherLastName,
-          fatherCareer: row.fatherCareer,
-          fatherLive: row.fatherLive ? "1" : "0",
-          fatherCitizenId: row.fatherCitizenId,
-          motherPrefixId: row.motherPrefixId,
-          motherFirstName: row.motherFirstName,
-          motherLastName: row.motherLastName,
-          motherCareer: row.motherCareer,
-          motherLive: row.motherLive ? "1" : "0",
-          motherCitizenId: row.motherCitizenId,
-          childrens: row.childrens,
-          createdFullName: row.createdFullName,
-          createdAt: new Date(row.createdAt),
-        };
-        familyDataHistory.value.push(arrayData);
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      if (familyDataHistory.value.length == 0) {
-        // modalError(
-        //   $q,
-        //   "ประวัติแก้ไขข้อมูลครอบครัว",
-        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
-        // );
-      } else {
-        modal.value = true;
-        indexRow.value = 0;
-        if (familyDataHistory.value.length > 1) {
-          next.value = true;
-          previous.value = false;
-        } else {
-          next.value = false;
-          previous.value = false;
-        }
-      }
-    });
-};
-
-const fetchData = async () => {
-  if (route.params.id) {
-    showLoader();
-    await http
-      .get(config.API.profileFamiId(route.params.id.toString()))
-      .then((res) => {
-        const data: ResponseObject = res.data.result;
-        familyData.value.prefixC = "";
-        familyData.value.prefixIdC = data.couplePrefixId;
-        familyData.value.firstnameC = data.coupleFirstName;
-        familyData.value.lastnameC = data.coupleLastName;
-        familyData.value.lastnameCOld = data.coupleLastNameOld;
-        familyData.value.occupationC = data.coupleCareer;
-        familyData.value.liveC = data.coupleLive ? "1" : "0";
-        familyData.value.citizenIdC = data.coupleCitizenId;
-
-        familyData.value.prefixM = "";
-        familyData.value.prefixIdM = data.fatherPrefixId;
-        familyData.value.firstnameM = data.fatherFirstName;
-        familyData.value.lastnameM = data.fatherLastName;
-        familyData.value.occupationM = data.fatherCareer;
-        familyData.value.liveM = data.fatherLive ? "1" : "0";
-        familyData.value.citizenIdM = data.fatherCitizenId;
-
-        familyData.value.prefixF = "";
-        familyData.value.prefixIdF = data.motherPrefixId;
-        familyData.value.firstnameF = data.motherFirstName;
-        familyData.value.lastnameF = data.motherLastName;
-        familyData.value.occupationF = data.motherCareer;
-        familyData.value.liveF = data.motherLive ? "1" : "0";
-        familyData.value.citizenIdF = data.motherCitizenId;
-        familyData.value.same = data.couple ? "1" : "0";
-
-        if (data.childrens.length > 0) {
-          let dataChild: childrenFamily[] = [];
-          data.childrens.map((row: childrenFamily, index: number) => {
-            dataChild.push({
-              id: `${index + 1}`,
-              childrenPrefixId: row.childrenPrefixId,
-              childrenFirstName: row.childrenFirstName,
-              childrenLastName: row.childrenLastName,
-              childrenCareer: row.childrenCareer,
-              childrenLive: row.childrenLive,
-              childrenCitizenId: row.childrenCitizenId,
-            });
-          });
-          familyData.value.childrens = dataChild;
-        } else {
-          familyData.value.childrens = [];
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  }
-};
-
-const editData = async () => {
-  showLoader();
-  const body: ResponseObject = {
-    couple: familyData.value.same == "1",
-    couplePrefixId: familyData.value.prefixIdC,
-    coupleFirstName: familyData.value.firstnameC,
-    coupleLastName: familyData.value.lastnameC,
-    coupleLastNameOld: familyData.value.lastnameCOld,
-    coupleCareer: familyData.value.occupationC,
-    coupleLive: familyData.value.liveC == "1",
-    coupleCitizenId: familyData.value.citizenIdC,
-    fatherPrefixId: familyData.value.prefixIdM,
-    fatherFirstName: familyData.value.firstnameM,
-    fatherLastName: familyData.value.lastnameM,
-    fatherCareer: familyData.value.occupationM,
-    fatherLive: familyData.value.liveM == "1",
-    fatherCitizenId: familyData.value.citizenIdM,
-    motherPrefixId: familyData.value.prefixIdF,
-    motherFirstName: familyData.value.firstnameF,
-    motherLastName: familyData.value.lastnameF,
-    motherCareer: familyData.value.occupationF,
-    motherLive: familyData.value.liveF == "1",
-    motherCitizenId: familyData.value.citizenIdF,
-    childrens: familyData.value.childrens,
-    createdFullName: "-",
-    createdAt: new Date(),
-  };
-  await http
-    .put(config.API.profileFamiId(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 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 = () => {
-  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 clickPreviousNext = (page: string) => {
-  const index: number =
-    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
-  let length: number = familyDataHistory.value.length;
-  previous.value = index == 0 ? false : true;
-  next.value = index == length - 1 ? false : true;
-  indexRow.value = index;
-};
-
-const selectRadio = (e: boolean, i: any) => {
-  if (e) {
-    familyData.value.prefixIdC = "";
-    familyData.value.firstnameC = "";
-    familyData.value.lastnameC = "";
-    familyData.value.lastnameCOld = "";
-    familyData.value.occupationC = "";
-    familyData.value.liveC = "";
-    familyData.value.citizenIdC = "";
-  }
-};
-
-const changeBtn = async () => {
-  if (edit.value == true) {
-    if (props.statusEdit === true) {
-      edit.value = false;
-      props.notiNoEdit();
-    } 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 text-dark">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลครอบครัว"
-      icon="mdi-account-group"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-      :historyClick="historyData"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-12 row q-pb-sm q-pt-md">
-          <div class="col-xs-2 col-sm-1 text-weight-bold">• บิดา</div>
-          <div class="q-gutter-sm">
-            <q-radio
-              v-model="familyData.liveM"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มีชีวิต"
-              dense
-              color="blue"
-              :disable="!edit"
-            />
-            <q-radio
-              v-model="familyData.liveM"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              color="red"
-              label="เสียชีวิต"
-              dense
-              :disable="!edit"
-            />
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.citizenIdM"
-            :label="`${'เลขประจำตัวประชาชน'}`"
-            maxlength="13"
-            mask="#############"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <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="familyData.prefixIdM"
-            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
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.firstnameM"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :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="familyData.lastnameM"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.occupationM"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="row col-12 q-py-sm">
-          <div class="col-xs-2 col-sm-1 text-weight-bold">• มารดา</div>
-          <div class="q-gutter-sm">
-            <q-radio
-              v-model="familyData.liveF"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มีชีวิต"
-              color="blue"
-              dense
-              :disable="!edit"
-            />
-            <q-radio
-              v-model="familyData.liveF"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              label="เสียชีวิต"
-              color="red"
-              dense
-              :disable="!edit"
-            />
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.citizenIdF"
-            :label="`${'เลขประจำตัวประชาชน'}`"
-            maxlength="13"
-            mask="#############"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <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="familyData.prefixIdF"
-            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
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.firstnameF"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :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="familyData.lastnameF"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.occupationF"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-
-        <div class="row col-12 q-py-sm">
-          <div class="col-xs-2 col-sm-1 text-weight-bold">• คู่สมรส</div>
-          <div class="q-gutter-sm">
-            <q-radio
-              v-model="familyData.same"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มี"
-              dense
-              :disable="!edit"
-              @update:model-value="selectRadio"
-            />
-            <q-radio
-              v-model="familyData.same"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              label="ไม่มี"
-              color="grey-9"
-              dense
-              :disable="!edit"
-              @update:model-value="selectRadio"
-            />
-          </div>
-          <q-separator
-            vertical
-            color="grey-4"
-            size="2px"
-            class="q-mx-md"
-            v-if="familyData.same == '1'"
-          />
-          <div class="q-gutter-sm" v-if="familyData.same == '1'">
-            <q-radio
-              v-model="familyData.liveC"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มีชีวิต"
-              color="blue"
-              dense
-              :disable="!edit"
-            />
-            <q-radio
-              v-model="familyData.liveC"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              label="เสียชีวิต"
-              color="red"
-              dense
-              :disable="!edit"
-            />
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.citizenIdC"
-            :label="`${'เลขประจำตัวประชาชน'}`"
-            maxlength="13"
-            mask="#############"
-          />
-        </div>
-
-        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <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="familyData.prefixIdC"
-            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-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.firstnameC"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.lastnameC"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.lastnameCOld"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
-            :label="`${'นามสกุล(เดิม)'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="familyData.occupationC"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-      </div>
-      <div
-        class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs q-mb-sm"
-      >
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
-          <label class="text-weight-bold">• บุตร</label>
-          <div>
-            <q-btn
-              v-if="edit"
-              size="12px"
-              flat
-              round
-              :disable="!edit"
-              :color="!edit ? 'grey-7' : 'primary'"
-              @click="addChildren"
-              icon="mdi-plus"
-            >
-              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-            </q-btn>
-          </div>
-        </div>
-
-        <div
-          class="row col-12 q-col-gutter-xs"
-          v-for="(items, index) in familyData.childrens"
-          :key="index"
-        >
-          <div class="col-12 row q-gutter-sm q-pb-xs">
-            <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
-            <q-radio
-              v-model="items.childrenLive"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มีชีวิต"
-              color="blue"
-              dense
-              :disable="!edit"
-            />
-            <q-radio
-              v-model="items.childrenLive"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              label="เสียชีวิต"
-              color="red"
-              dense
-              :disable="!edit"
-            />
-          </div>
-          <div>
-            <q-btn
-              v-if="edit"
-              flat
-              dense
-              size="12px"
-              round
-              :disable="!edit"
-              :color="!edit ? 'grey-7' : 'red'"
-              @click="deleteChildren(items)"
-              icon="mdi-delete-outline"
-            >
-              <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
-            </q-btn>
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="items.childrenCitizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-2 col-md-2">
-            <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="items.childrenPrefixId"
-              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
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="items.childrenFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :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="items.childrenLastName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-          <div
-            :class="
-              edit
-                ? 'col-xs-10 col-sm-1 col-md-1'
-                : 'col-xs-12 col-sm-2 col-md-2'
-            "
-          >
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="items.childrenCareer"
-              :label="`${'อาชีพ'}`"
-            />
-          </div>
-          <div
-            class="col-12 q-my-sm"
-            v-if="index + 1 < familyData.childrens.length"
-          >
-            <q-separator v-if="edit" inset />
-          </div>
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <DialogHistory
-    v-model:modal="modal"
-    v-model:fix="fix"
-    title="ประวัติแก้ไขข้อมูลครอบครัว"
-  >
-    <template v-slot:body>
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 text-weight-bold">
-          {{
-            `${
-              familyDataHistory.length > 0 &&
-              familyDataHistory[indexRow].createdAt != null
-                ? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
-                : ""
-            }`
-          }}
-        </div>
-        <div class="col-xs-12 text-weight-bold">
-          • บิดา
-          <q-radio
-            v-model="familyDataHistory[indexRow].fatherLive"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มีชีวิต"
-            dense
-            :disable="true"
-          />
-          <q-radio
-            v-model="familyDataHistory[indexRow].fatherLive"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="เสียชีวิต"
-            dense
-            :disable="true"
-          />
-        </div>
-        <div class="row col-12">
-          <div class="col-3">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].fatherCitizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-          </div>
-          <div class="col-2">
-            <selector
-              :hide-dropdown-icon="true"
-              hide-bottom-space
-              :class="getClass(false)"
-              :readonly="true"
-              :borderless="true"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-              :outlined="false"
-              dense
-              lazy-rules
-              v-model="familyDataHistory[indexRow].fatherPrefixId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้าชื่อ'}`"
-              input-debounce="0"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].fatherFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].fatherLastName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].fatherCareer"
-              :label="`${'อาชีพ'}`"
-            />
-          </div>
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-
-        <div class="col-xs-12 text-weight-bold">
-          • มารดา
-          <q-radio
-            v-model="familyDataHistory[indexRow].motherLive"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มีชีวิต"
-            dense
-            :disable="true"
-          />
-          <q-radio
-            v-model="familyDataHistory[indexRow].motherLive"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="เสียชีวิต"
-            dense
-            :disable="true"
-          />
-        </div>
-        <div class="row col-12">
-          <div class="col-3">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].motherCitizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-          </div>
-          <div class="col-2">
-            <selector
-              :hide-dropdown-icon="true"
-              hide-bottom-space
-              :class="getClass(false)"
-              :readonly="true"
-              :borderless="true"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-              :outlined="false"
-              dense
-              lazy-rules
-              v-model="familyDataHistory[indexRow].motherPrefixId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้าชื่อ'}`"
-              input-debounce="0"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].motherFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].motherLastName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].motherCareer"
-              :label="`${'อาชีพ'}`"
-            />
-          </div>
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• คู่สมรส</label>
-          <q-radio
-            v-model="familyDataHistory[indexRow].couple"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="true"
-            @update:model-value="selectRadio"
-          />
-          <q-radio
-            v-model="familyDataHistory[indexRow].couple"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            color="grey-9"
-            dense
-            :disable="true"
-            @update:model-value="selectRadio"
-          />
-          <q-separator
-            vertical
-            color="grey-4"
-            size="2px"
-            class="q-mx-md"
-            v-if="familyData.same == '1'"
-          />
-          <div class="q-gutter-sm" v-if="familyData.same == '1'">
-            <q-radio
-              v-model="familyDataHistory[indexRow].coupleLive"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มีชีวิต"
-              color="blue"
-              dense
-              :disable="true"
-            />
-            <q-radio
-              v-model="familyDataHistory[indexRow].coupleLive"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              label="เสียชีวิต"
-              color="red"
-              dense
-              :disable="true"
-            />
-          </div>
-        </div>
-
-        <div
-          class="row col-12"
-          v-if="familyDataHistory[indexRow].couple == '1'"
-        >
-          <div class="col-3">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].coupleCitizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-          </div>
-          <div class="col-2">
-            <selector
-              :hide-dropdown-icon="true"
-              hide-bottom-space
-              :class="getClass(false)"
-              :readonly="true"
-              :borderless="true"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-              :outlined="false"
-              dense
-              lazy-rules
-              v-model="familyDataHistory[indexRow].couplePrefixId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้าชื่อ'}`"
-              input-debounce="0"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].coupleFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].coupleLastName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].coupleLastNameOld"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
-              :label="`${'นามสกุล(เดิม)'}`"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="familyDataHistory[indexRow].coupleCareer"
-              :label="`${'อาชีพ'}`"
-            />
-          </div>
-        </div>
-
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-      </div>
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• บุตร</label>
-        </div>
-
-        <div
-          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          v-for="items in familyDataHistory[indexRow].childrens"
-          :key="items.id"
-        >
-          <div class="col-12 row q-gutter-sm q-pb-xs">
-            <q-radio
-              v-model="items.childrenLive"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="1"
-              label="มีชีวิต"
-              color="blue"
-              dense
-              :disable="true"
-            />
-            <q-radio
-              v-model="items.childrenLive"
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
-              val="0"
-              label="เสียชีวิต"
-              color="red"
-              dense
-              :disable="true"
-            />
-          </div>
-          <div class="row col-12">
-            <div class="col-3">
-              <q-input
-                :class="getClass(false)"
-                hide-bottom-space
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="true"
-                :borderless="true"
-                v-model="items.childrenCitizenId"
-                :label="`${'เลขประจำตัวประชาชน'}`"
-                maxlength="13"
-                mask="#############"
-              />
-            </div>
-            <div class="col-2">
-              <selector
-                :hide-dropdown-icon="true"
-                hide-bottom-space
-                :class="getClass(false)"
-                :readonly="true"
-                :borderless="true"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-                :outlined="false"
-                dense
-                lazy-rules
-                v-model="items.childrenPrefixId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.prefixOps"
-                option-value="id"
-                :label="`${'คำนำหน้าชื่อ'}`"
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-              />
-            </div>
-            <div class="col">
-              <q-input
-                :class="getClass(false)"
-                hide-bottom-space
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="true"
-                :borderless="true"
-                v-model="items.childrenFirstName"
-                :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-                :label="`${'ชื่อ'}`"
-              />
-            </div>
-            <div class="col">
-              <q-input
-                :class="getClass(false)"
-                hide-bottom-space
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="true"
-                :borderless="true"
-                v-model="items.childrenLastName"
-                :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-                :label="`${'นามสกุล'}`"
-              />
-            </div>
-            <div class="col">
-              <q-input
-                :class="getClass(false)"
-                hide-bottom-space
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="true"
-                :borderless="true"
-                v-model="items.childrenCareer"
-                :label="`${'อาชีพ'}`"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-slot:footer>
-      <q-btn
-        flat
-        round
-        icon="mdi-menu-left"
-        @click="clickPreviousNext('next')"
-        :disable="previous == false"
-        :color="!previous ? 'grey-7' : 'public'"
-      />
-      <q-btn
-        flat
-        round
-        icon="mdi-menu-right"
-        @click="clickPreviousNext('previous')"
-        :disable="next == false"
-        :color="!next ? 'grey-7' : 'public'"
-      />
-      <q-space />
-      <div class="text-black text-subtitle2 text-bold">
-        {{ indexRow + 1 }}/{{ familyDataHistory.length }}
-      </div>
-    </template>
-  </DialogHistory>
-</template>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
deleted file mode 100644
index 3b54c158f..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
+++ /dev/null
@@ -1,762 +0,0 @@
-<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
-                :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
-                :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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
deleted file mode 100644
index 90f8cee8a..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
+++ /dev/null
@@ -1,1165 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useQuasar } from "quasar";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-import type {
-  RequestItemsHistoryObject,
-  Columns,
-} from "@/modules/04_registry/interface/request/Information";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import OldName from "@/modules/04_registry/components/Information/OldName.vue";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import HistoryTable from "@/components/TableHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
-import type { QTableColumn, QForm } from "quasar";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  fetchDataProfile: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  messageError,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-
-const profileStore = useProfileDataStore();
-const { changeRetireText, changeBirth } = profileStore;
-const edit = ref<boolean>(false);
-const defaultCitizenData = ref<string | null>("");
-const informaData = ref<Information>(defaultInformation);
-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 myform = ref<QForm | null>(null);
-const dateBefore = ref<Date>(new Date());
-const same = ref<string>("0");
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const columnsHistory = ref<QTableColumn[]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    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: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "relationship",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "relationship",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bloodGroup",
-    align: "left",
-    label: "หมู่เลือด",
-    sortable: true,
-    field: "bloodGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "nationality",
-    align: "left",
-    label: "สัญชาติ",
-    sortable: true,
-    field: "nationality",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "race",
-    align: "left",
-    label: "เชื้อชาติ",
-    sortable: true,
-    field: "race",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "religion",
-    align: "left",
-    label: "ศาสนา",
-    sortable: true,
-    field: "religion",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "telephoneNumber",
-    align: "left",
-    label: "เบอร์โทร",
-    sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    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[]>([
-  "citizenId",
-  "prefix",
-  "firstName",
-  "lastName",
-  "birthDate",
-  "gender",
-  "relationship",
-  "bloodGroup",
-  "nationality",
-  "race",
-  "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
-  "createdFullName",
-  "createdAt",
-]);
-
-onMounted(async () => {
-  await fetchPerson();
-  await fetchData();
-  emit("update:statusEdit", false);
-  defaultAdd();
-});
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    informaData.value = {
-      cardid: null,
-      age: null,
-      prefix: null,
-      prefixId: null,
-      firstname: null,
-      lastname: null,
-      birthDate: new Date(),
-      genderId: null,
-      bloodId: null,
-      nationality: null,
-      ethnicity: null,
-      statusId: null,
-      religionId: null,
-      tel: null,
-      employeeType: null,
-      employeeClass: null,
-      profileType: null,
-    };
-  }
-};
-
-const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
-};
-
-/**
- * get รายการ ข้อมูลเกี่ยวกับบุคคล
- */
-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();
-    });
-};
-
-const changeCardID = (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      dialogMessage(
-        $q,
-        "ข้อมูลมีการแก้ไข?",
-        "ยืนยันการเปลี่ยนเลขประจำตัวประชาชนใช่หรือไม่",
-        "info",
-        "ยืนยัน",
-        "public",
-        async () => {
-          await checkCitizen(value);
-        },
-        async () => {
-          informaData.value.cardid = defaultCitizenData.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();
-    });
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          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 "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;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
-  await calRetire(modelData);
-};
-
-const fetchDataComponent = async (modelData: Date) => {
-  await props.fetchDataProfile();
-  await fetchData();
-};
-
-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);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        changeRetireText(date2Thai(retire));
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchData = async () => {
-  if (route.params.id) {
-    showLoader();
-    await http
-      .get(config.API.profileInforId(route.params.id.toString()))
-      .then(async (res: any) => {
-        const data: ResponseObject = res.data.result;
-        defaultCitizenData.value = data.citizenId;
-        informaData.value.cardid = data.citizenId;
-        informaData.value.prefix = "";
-        informaData.value.prefixId = data.prefixId;
-        informaData.value.firstname = data.firstName;
-        informaData.value.lastname = data.lastName;
-        informaData.value.birthDate = new Date(data.birthDate);
-        informaData.value.genderId =
-          data.genderId !== "00000000-0000-0000-0000-000000000000"
-            ? data.genderId
-            : "";
-        informaData.value.bloodId = data.bloodGroupId;
-        informaData.value.nationality = data.nationality;
-        informaData.value.ethnicity = data.race;
-        informaData.value.statusId =
-          data.relationshipId !== "00000000-0000-0000-0000-000000000000"
-            ? data.relationshipId
-            : "";
-        informaData.value.religionId =
-          data.religionId !== "00000000-0000-0000-0000-000000000000"
-            ? data.religionId
-            : "";
-        informaData.value.tel = data.telephoneNumber;
-        informaData.value.age = data.age;
-        informaData.value.employeeType = data.employeeType;
-        informaData.value.employeeClass = data.employeeClass;
-        informaData.value.profileType = data.profileType;
-        dateBefore.value = new Date(data.birthDate);
-        same.value = data.changeName == true ? "1" : "0";
-        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-        if (
-          data.profileType == "officer" &&
-          columnsHistory.value.length >= 15
-        ) {
-          columnsHistory.value.splice(13, 1);
-          columnsHistory.value.splice(12, 1);
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        //   hideLoader();
-        await props.fetchDataProfile();
-      });
-  }
-};
-
-const editData = async () => {
-  const body: any = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate:
-      informaData.value.birthDate != null
-        ? dateToISO(informaData.value.birthDate)
-        : dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
-  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 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 () => {
-  if (myform.value != null) {
-    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">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform" class="col-12">
-      <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">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.cardid"
-            @update:model-value="changeCardID"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-              (val:string) =>
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]"
-            label="เลขประจำตัวประชาชน"
-            maxlength="13"
-            mask="#############"
-          />
-        </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="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
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :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="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <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="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
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="
-                  informaData.birthDate
-                    ? date2Thai(informaData.birthDate)
-                    : null
-                "
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :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-2 col-md-2">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :model-value="informaData.age"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            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-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            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
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.ethnicity"
-            :label="`${'เชื้อชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            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-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            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="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            mask="##########"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) =>
-                val.length >= 10 ||
-                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <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="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                      ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <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="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            color="grey-9"
-            dense
-            :disable="!edit"
-          />
-        </div>
-        <div class="row col-12">
-          <OldName
-            v-if="same == '1'"
-            v-model:statusEdit="edit"
-            :fetchDataInformation="fetchDataComponent"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
-            :firstname="
-              informaData.firstname == null ? '' : informaData.firstname
-            "
-            :lastname="informaData.lastname == null ? '' : informaData.lastname"
-          />
-        </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 == 'birthDate' || 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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
deleted file mode 100644
index b165d0791..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
+++ /dev/null
@@ -1,976 +0,0 @@
-<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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue b/src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
deleted file mode 100644
index 83f0a8d66..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
+++ /dev/null
@@ -1,674 +0,0 @@
-<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,
-        //   });
-        // });
-        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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Leave.vue b/src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
deleted file mode 100644
index b55992929..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
+++ /dev/null
@@ -1,1276 +0,0 @@
-<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,
-  RequestItemsTotalObject,
-  DataProps,
-} from "@/modules/04_registry/interface/request/Leave";
-import type {
-  ResponseObject,
-  ResponseTotalObject,
-} from "@/modules/04_registry/interface/response/Leave";
-import type {
-  DataOption,
-  DataOptionLeave,
-} 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,
-  messageError,
-  statusLeave,
-  dialogMessage,
-  dateToISO,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-const route = useRoute();
-
-const typeLeave = ref<string>("");
-const typeLeaveOption = ref<DataOptionLeave[]>([]);
-const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
-
-const statLeave = ref<string>("");
-const statLeaveOption = ref<DataOption[]>([
-  { id: "approve", name: "ผ่านการอนุมัติ" },
-  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
-  { id: "cancel", name: "ยกเลิก" },
-  { id: "waitting", name: "รออนุมัติ" },
-]);
-const statLeaveOptionFilter = ref<DataOption[]>([
-  { id: "approve", name: "ผ่านการอนุมัติ" },
-  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
-  { id: "cancel", name: "ยกเลิก" },
-  { id: "waitting", name: "รออนุมัติ" },
-]);
-const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ลา
-const numLeave = ref<number>(0); //วันที่ ลา
-const numUsedLeave = ref<number>(0); //วันที่ ลา
-const reason = ref<string>(""); //เหตุผล
-const id = ref<string>("");
-// const year = ref<number>(0);
-// const sickDay = ref<number>();
-// const personalDay = ref<number>();
-// const maternityDay = ref<number>();
-// const wifeDay = ref<number>();
-// const restDay = ref<number>();
-// const ordainDay = ref<number>();
-// const absentDay = ref<number>();
-// const studyDay = ref<number>();
-// const agencyDay = ref<number>();
-// const coupleDay = ref<number>();
-// const therapyDay = ref<number>();
-const myFormAdd = ref<any>(); //form data input
-const myForm = ref<any>(); //form data input
-const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
-const modal = ref<boolean>(false); //modal add detail
-const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
-
-const modalAdd = ref<boolean>(false); //modal add detail
-// 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 filterTotal = ref<string>("");
-const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
-const filter = ref<string>(""); //search data table
-const visibleColumns = ref<String[]>([]);
-profileData.leave.columns.length == 0
-  ? (visibleColumns.value = [
-      "no",
-      "typeLeave",
-      "dateStartLeave",
-      "numLeave",
-      "sumLeave",
-      "totalLeave",
-      "status",
-      "reason",
-    ])
-  : (visibleColumns.value = profileData.leave.columns);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "typeLeave",
-    align: "left",
-    label: "ประเภทการลา",
-    sortable: true,
-    field: "typeLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateStartLeave",
-    align: "left",
-    label: "วัน เดือน ปี ที่ลา",
-    sortable: true,
-    field: "dateStartLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "numLeave",
-    align: "right",
-    label: "จำนวนวันลา",
-    sortable: true,
-    field: "numLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "sumLeave",
-    align: "right",
-    label: "ลามาแล้ว",
-    sortable: true,
-    field: "sumLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "totalLeave",
-    align: "right",
-    label: "รวมเป็น",
-    sortable: true,
-    field: "totalLeave",
-    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: "reason",
-    align: "right",
-    label: "เหตุผล",
-    sortable: true,
-    field: "reason",
-    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: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "typeLeave",
-    align: "left",
-    label: "ประเภทการลา",
-    sortable: true,
-    field: "typeLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateStartLeave",
-    align: "left",
-    label: "วัน เดือน ปี ที่ลา",
-    sortable: true,
-    field: "dateStartLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "numLeave",
-    align: "right",
-    label: "จำนวนวันลา",
-    sortable: true,
-    field: "numLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "sumLeave",
-    align: "right",
-    label: "ลามาแล้ว",
-    sortable: true,
-    field: "sumLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "totalLeave",
-    align: "right",
-    label: "รวมเป็น",
-    sortable: true,
-    field: "totalLeave",
-    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: "reason",
-    align: "left",
-    label: "เหตุผล",
-    sortable: true,
-    field: "reason",
-    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[]>([
-  "no",
-  "typeLeave",
-  "dateStartLeave",
-  "numLeave",
-  "sumLeave",
-  "totalLeave",
-  "status",
-  "reason",
-]);
-const visibleColumnsTotal = ref<String[]>([
-  "typeLeave",
-  "limitLeave",
-  "totalLeave",
-  "remainLeave",
-]);
-const columnsTotal = ref<QTableProps["columns"]>([
-  {
-    name: "typeLeave",
-    align: "left",
-    label: "ประเภทการลา",
-    sortable: true,
-    field: "typeLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "limitLeave",
-    align: "right",
-    label: "จำนวนวันที่ได้รับ",
-    sortable: true,
-    field: "limitLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "totalLeave",
-    align: "right",
-    label: "จำนวนวันที่ใช้",
-    sortable: true,
-    field: "totalLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "remainLeave",
-    align: "right",
-    label: "จำนวนวันที่เหลือ",
-    sortable: true,
-    field: "remainLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("leave", count);
-});
-
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = async () => {
-  rows.value = [];
-  if (profileId.value) {
-    showLoader();
-    await http
-      .get(config.API.profileLeaveId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            typeLeave: e.typeLeave,
-            dateStartLeave: new Date(e.dateStartLeave),
-            dateEndLeave: new Date(e.dateEndLeave),
-            numLeave: e.numLeave,
-            sumLeave: e.sumLeave,
-            totalLeave: e.totalLeave,
-            status: e.status,
-            reason: e.reason,
-            typeLeaveId:
-              e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-                ? e.typeLeaveId
-                : "",
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "typeLeaveOption":
-      update(() => {
-        typeLeaveOption.value = typeLeaveOptionFilter.value.filter(
-          (v: DataOptionLeave) =>
-            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
-        );
-      });
-      break;
-    case "statLeaveOption":
-      update(() => {
-        statLeaveOption.value = statLeaveOptionFilter.value.filter(
-          (v: DataOption) =>
-            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
-        );
-      });
-      break;
-    default:
-      break;
-  }
-};
-
-const clickHistory = async (row: RequestItemsObject) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileLeaveHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          typeLeave: e.typeLeave,
-          dateStartLeave: new Date(e.dateStartLeave),
-          dateEndLeave: new Date(e.dateEndLeave),
-          numLeave: e.numLeave,
-          sumLeave: e.sumLeave,
-          totalLeave: e.totalLeave,
-          status: e.status,
-          reason: e.reason,
-          typeLeaveId:
-            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-              ? e.typeLeaveId
-              : "",
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickEditRowType = () => {
-  const filter = typeLeaveOptionFilter.value.filter(
-    (v: DataOptionLeave) => v.id == typeLeave.value
-  );
-  if (filter.length > 0) {
-    numUsedLeave.value = filter[0].totalLeave;
-  }
-};
-
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
-const clickEditRow = () => {
-  editRow.value = true;
-};
-
-// /**
-//  * กดดูข้อมูลก่อนหน้า
-//  */
-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];
-  //   year.value = row.year;
-  //   sickDay.value = row.sickDay;
-  //   personalDay.value = row.personalDay;
-  //   maternityDay.value = row.maternityDay;
-  //   wifeDay.value = row.wifeDay;
-  //   restDay.value = row.restDay;
-  //   ordainDay.value = row.ordainDay;
-  //   absentDay.value = row.absentDay;
-  //   studyDay.value = row.studyDay;
-  //   agencyDay.value = row.agencyDay;
-  //   coupleDay.value = row.coupleDay;
-  //   therapyDay.value = row.therapyDay;
-  id.value = row.id;
-  typeLeave.value = row.typeLeaveId;
-  statLeave.value = row.status;
-  reason.value = row.reason;
-  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
-  numLeave.value = row.numLeave;
-  numUsedLeave.value = row.sumLeave;
-};
-
-// /**
-//  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
-//  */
-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();
-};
-
-const clickAddLeave = async () => {
-  editRow.value = false;
-  edit.value = true;
-  modalAdd.value = true;
-  modalEdit.value = false;
-  typeLeave.value = "";
-  statLeave.value = "";
-  reason.value = "";
-  dateRange.value = [new Date(), new Date()];
-  numLeave.value = 0;
-  numUsedLeave.value = 0;
-  await clickTotal();
-  if (rowsTotal.value.length > 0) {
-    let data: DataOptionLeave[] = [];
-    rowsTotal.value.map((e: ResponseTotalObject) => {
-      data.push({
-        id: e.typeLeaveId,
-        name: e.typeLeave,
-        totalLeave: e.totalLeave,
-      });
-    });
-    typeLeaveOption.value = data;
-    typeLeaveOptionFilter.value = data;
-  }
-  //   await addData();
-};
-
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  if (editRow.value == true) {
-    dialogMessage(
-      $q,
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      "info",
-      "ยืนยัน",
-      "public",
-      () => {
-        edit.value = false;
-      },
-      undefined
-    );
-  } else {
-    edit.value = false;
-    await checkRowPage();
-  }
-};
-
-// /**
-//  * กดบันทึกใน dialog
-//  */
-const clickSave = () => {
-  dialogConfirm($q, () => SaveData());
-};
-const SaveData = async () => {
-  await myFormAdd.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modalEdit.value) {
-        await editData();
-      } else {
-        await saveData();
-      }
-    }
-  });
-};
-
-// /**
-//  * บันทึกเพิ่มข้อมูล
-//  */
-const saveData = async () => {
-  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
-
-  if (profileId.value) {
-    showLoader();
-    await http
-      .post(config.API.profileLeaveId(profileId.value), {
-        dateStartLeave: dateToISO(dateRange.value[0]),
-        dateEndLeave: dateToISO(dateRange.value[1]),
-        numLeave: numLeave.value,
-        sumLeave: numUsedLeave.value,
-        totalLeave: sum,
-        status: statLeave.value,
-        reason: reason.value,
-        typeLeaveId: typeLeave.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modalAdd.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
-};
-
-// /**
-//  * บันทึกแก้ไขข้อมูล
-//  */
-const editData = async () => {
-  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
-
-  showLoader();
-  await http
-    .put(config.API.profileLeaveId(id.value), {
-      dateStartLeave: dateToISO(dateRange.value[0]),
-      dateEndLeave: dateToISO(dateRange.value[1]),
-      numLeave: numLeave.value,
-      sumLeave: numUsedLeave.value,
-      totalLeave: sum,
-      status: statLeave.value,
-      reason: reason.value,
-      typeLeaveId: typeLeave.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modalAdd.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-const deleteData = async () => {
-  showLoader();
-  await http
-    .delete(config.API.profileLeaveId(id.value))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      modalAdd.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-// /**
-//  * ลบลบข้อมูล
-//  */
-const clickDelete = async () => {
-  dialogMessage(
-    $q,
-    `ลบข้อมูล`,
-    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    "delete",
-    "ยืนยัน",
-    "red",
-    async () => {
-      await deleteData();
-    },
-    async () => {
-      await fetchData();
-    }
-  );
-};
-const clickCloseLeave = async () => {
-  if (editRow.value == true) {
-    dialogMessage(
-      $q,
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      "info",
-      "ยืนยัน",
-      "public",
-      () => {
-        modalAdd.value = false;
-        next.value = false;
-        previous.value = false;
-      },
-      undefined
-    );
-  } else {
-    modalAdd.value = false;
-    next.value = false;
-    previous.value = false;
-  }
-};
-
-/**
- * กดปิด dialog
- */
-const clickClose = async () => {
-  if (editRow.value == true) {
-    dialogMessage(
-      $q,
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      "info",
-      "ยืนยัน",
-      "primary",
-      () => {
-        modal.value = false;
-        next.value = false;
-        previous.value = false;
-      },
-      undefined
-    );
-  } 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;
-  modalAdd.value = true;
-  edit.value = false;
-  rowIndex.value = props.rowIndex;
-  id.value = props.row.id;
-
-  typeLeave.value = props.row.typeLeaveId;
-  statLeave.value = props.row.status;
-  reason.value = props.row.reason;
-  dateRange.value = [
-    new Date(props.row.dateStartLeave),
-    new Date(props.row.dateEndLeave),
-  ];
-  numLeave.value = props.row.numLeave;
-  numUsedLeave.value = props.row.sumLeave;
-  await clickTotal();
-  if (rowsTotal.value.length > 0) {
-    let data: DataOptionLeave[] = [];
-    rowsTotal.value.map((e: ResponseTotalObject) => {
-      data.push({
-        id: e.typeLeaveId,
-        name: e.typeLeave,
-        totalLeave: e.totalLeave,
-      });
-    });
-    typeLeaveOption.value = data;
-    typeLeaveOptionFilter.value = data;
-  }
-  await checkRowPage();
-};
-
-/**
- * กดปุ่มเพิ่มบน table
- */
-const addData = async () => {
-  //   modalEdit.value = false;
-  modal.value = true;
-  //   edit.value = true;
-  await clickTotal();
-};
-
-// /**
-//  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
-//  */
-// 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 clickTotal = async () => {
-  rowsTotal.value = [];
-  if (profileId.value) {
-    showLoader();
-    await http
-      .get(config.API.profileLeaveTotalId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        data.map((e: ResponseTotalObject) => {
-          rowsTotal.value.push({
-            typeLeaveId: e.typeLeaveId,
-            totalLeave: e.totalLeave,
-            limitLeave: e.limitLeave,
-            remainLeave: e.remainLeave,
-            typeLeave: e.typeLeave,
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-// /**
-//  * validate input ใน dialog
-//  */
-// const validateData = async () => {
-//   checkValidate.value = true;
-//   await myFormAdd.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,
-//   };
-// };
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
-    return `${date2Thai(val[0])}`;
-  } else {
-    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
-  }
-};
-
-/**
- * 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"
-        :addleave="clickAddLeave"
-        name="การลา"
-        icon="mdi-calendar-account"
-        iconAdd="mdi-calendar-account"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              class="cursor-pointer"
-              @click="selectData(props)"
-            >
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div
-                v-else-if="col.name == 'dateStartLeave'"
-                class="table_ellipsis"
-              >
-                {{
-                  dateThaiRange([
-                    props.row.dateStartLeave,
-                    props.row.dateEndLeave,
-                  ])
-                }}
-              </div>
-              <div v-else-if="col.name == 'status'" class="table_ellipsis">
-                {{ statusLeave(col.value) }}
-                <!-- {{ col.value }} -->
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'numLeave' ||
-                  col.name == 'sumLeave' ||
-                  col.name == 'totalLeave'
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-              </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 Add Edit Leave -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myFormAdd">
-        <DialogHeader tittle="การลา" :close="clickCloseLeave" />
-        <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">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="typeLeave"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทการลา'}`"
-                @update:modelValue="clickEditRowType"
-                emit-value
-                map-options
-                option-label="name"
-                :options="typeLeaveOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateRange"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-                range
-              >
-                <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
-                    :borderless="!edit"
-                    :model-value="dateThaiRange(dateRange)"
-                    :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-3 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="numLeave"
-                type="number"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
-                hide-bottom-space
-                :label="`${'จำนวนวันที่ลา'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-3 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(false)"
-                :outlined="true"
-                dense
-                lazy-rules
-                :readonly="false"
-                :borderless="false"
-                disable
-                v-model="numUsedLeave"
-                type="number"
-                :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="statLeave"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
-                hide-bottom-space
-                :label="`${'สถานะการลา'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="statLeaveOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reason"
-                type="textarea"
-                :rules="[(val:string) => !!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>
-  <!-- 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>
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <data-table
-              :rows="rowsTotal"
-              :columns="columnsTotal"
-              :filter="filterTotal"
-              :visible-columns="visibleColumnsTotal"
-              v-model:inputfilter="filterTotal"
-              v-model:inputvisible="visibleColumnsTotal"
-              :nornmalData="true"
-            >
-              <template #columns="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-                    <div
-                      v-else-if="
-                        col.name == 'numLeave' ||
-                        col.name == 'sumLeave' ||
-                        col.name == 'totalLeave'
-                      "
-                      class="table_ellipsis"
-                    >
-                      {{
-                        col.value == null
-                          ? ""
-                          : col.value.toLocaleString("en-US")
-                      }}
-                    </div>
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-            </data-table>
-          </div>
-        </q-card-section>
-        <q-separator />
-      </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 == 'no'">
-            {{ props.rowIndex + 1 }}
-          </div>
-          <div v-else-if="col.name == 'dateStartLeave'" class="table_ellipsis">
-            {{
-              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
-            }}
-          </div>
-
-          <div
-            v-else-if="
-              col.name == 'numLeave' ||
-              col.name == 'sumLeave' ||
-              col.name == 'totalLeave'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-          </div>
-          <div v-else-if="col.name == 'status'" class="table_ellipsis">
-            {{ statusLeave(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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Other.vue b/src/modules/08_registryEmployee/components/EditEmployee/Other.vue
deleted file mode 100644
index ee75cd138..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Other.vue
+++ /dev/null
@@ -1,626 +0,0 @@
-<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
-                    :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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Record.vue b/src/modules/08_registryEmployee/components/EditEmployee/Record.vue
deleted file mode 100644
index 252bfce55..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Record.vue
+++ /dev/null
@@ -1,827 +0,0 @@
-<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
-                    :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
-                    :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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Salary.vue b/src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
deleted file mode 100644
index e04767679..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
+++ /dev/null
@@ -1,2086 +0,0 @@
-<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/Salary";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Salary";
-import type {
-  DataOption,
-  treeTab,
-} 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 } =
-  mixin;
-const route = useRoute();
-const id = ref<string>("");
-const date = ref<Date>(new Date());
-const amount = ref<number | null>(null);
-const positionSalaryAmount = ref<number | null>(null);
-const mouthSalaryAmount = ref<number | null>(null);
-const ocId = ref<string>();
-const positionId = ref<string>();
-const positionLineId = ref<string>();
-const positionPathSideId = ref<string>();
-const positionTypeId = ref<string>();
-const positionLevelId = ref<string>();
-const positionExecutiveId = ref<string>();
-const positionExecutiveSideId = ref<string>();
-const posNoId = ref<string>();
-const refCommandNo = ref<string>();
-const refCommandDate = ref<Date>(new Date());
-const ocOptions = ref<DataOption[]>([]);
-const positionOptions = ref<DataOption[]>([]);
-const positionLineOptions = ref<DataOption[]>([]);
-const positionSideOptions = ref<DataOption[]>([]);
-const positionTypeOptions = ref<DataOption[]>([]);
-const positionLevelOptions = ref<DataOption[]>([]);
-const positionExecutiveOptions = ref<DataOption[]>([]);
-const positionExecutiveSideOptions = ref<DataOption[]>([]);
-const posNoOptions = ref<DataOption[]>([]);
-const ocOptionsFilter = ref<DataOption[]>([]);
-const positionOptionsFilter = ref<DataOption[]>([]);
-const positionLineOptionsFilter = ref<DataOption[]>([]);
-const positionSideOptionsFilter = ref<DataOption[]>([]);
-const positionTypeOptionsFilter = ref<DataOption[]>([]);
-const positionLevelOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
-const posNoOptionsFilter = ref<DataOption[]>([]);
-const search = ref<string>("");
-const expanded = ref<string[]>([]);
-const selected = ref<string>("");
-const nodesTree = ref<treeTab[]>([]);
-const refSelected = ref<DataOption | null>(null);
-const refOptions = ref<DataOption[]>([
-  {
-    id: "17",
-    name: "****************  ข้าราชการสามัญ  **********************",
-    disable: true,
-  },
-  {
-    id: "18",
-    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "19",
-    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "21",
-    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const refOptionsFilter = ref<DataOption[]>([
-  {
-    id: "17",
-    name: "****************  ข้าราชการสามัญ  **********************",
-    disable: true,
-  },
-  {
-    id: "18",
-    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "19",
-    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const salaryClass = ref<string>();
-const salaryRef = 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.salary.columns.length == 0
-  ? (visibleColumns.value = [
-      "date",
-      "amount",
-      "positionSalaryAmount",
-      "mouthSalaryAmount",
-      "oc",
-      "position",
-      "posNo",
-      "positionLine",
-      "positionPathSide",
-      "positionType",
-      "positionLevel",
-      "positionExecutive",
-      "positionExecutiveSide",
-      "salaryClass",
-      "salaryRef",
-      "refCommandNo",
-    ])
-  : (visibleColumns.value = profileData.salary.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: "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: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    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: "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: "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: "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: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "salaryRef",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "salaryRef",
-    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" }),
-  },
-]);
-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: "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: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    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: "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: "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: "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: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "salaryRef",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "salaryRef",
-    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: "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",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "oc",
-  "position",
-  "posNo",
-  "positionLine",
-  "positionPathSide",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
-  "positionExecutiveSide",
-  "salaryClass",
-  "salaryRef",
-  "refCommandNo",
-  "createdFullName",
-  "createdAt",
-]);
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("salary", count);
-});
-
-onMounted(async () => {
-  await fetchPosition();
-  await nodeTree();
-  await fetchData();
-});
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "1":
-      update(() => {
-        posNoOptions.value = posNoOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "2":
-      update(() => {
-        positionOptions.value = positionOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "3":
-      update(() => {
-        positionSideOptions.value = positionSideOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "4":
-      update(() => {
-        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "5":
-      update(() => {
-        positionLineOptions.value = positionLineOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "6":
-      update(() => {
-        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "7":
-      update(() => {
-        positionExecutiveOptions.value =
-          positionExecutiveOptionsFilter.value.filter(
-            (v: DataOption) => v.name.indexOf(val) > -1
-          );
-      });
-      break;
-    case "8":
-      update(() => {
-        refOptions.value = refOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileOrganizRoot)
-    .then((res: any) => {
-      const data = res.data.result;
-      nodesTree.value = data;
-      if (data.length > 0) {
-        expanded.value = [data[0].id];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * get รายการ ตำแหน่ง
- */
-const fetchPosition = async () => {
-  showLoader();
-  await http
-    .get(config.API.position)
-    .then((res) => {
-      const data = res.data.result;
-      let optionpositionpaths: DataOption[] = [];
-      data.positionPaths.map((r: any) => {
-        optionpositionpaths.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionOptions.value = optionpositionpaths;
-      positionOptionsFilter.value = optionpositionpaths;
-
-      let optionPositionPathSides: DataOption[] = [];
-      data.positionPathSides.map((r: any) => {
-        optionPositionPathSides.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionSideOptions.value = optionPositionPathSides;
-      positionSideOptionsFilter.value = optionPositionPathSides;
-
-      let optionPositionTypes: DataOption[] = [];
-      data.positionTypes.map((r: any) => {
-        optionPositionTypes.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionTypeOptions.value = optionPositionTypes;
-      positionTypeOptionsFilter.value = optionPositionTypes;
-
-      let optionPositionLines: DataOption[] = [];
-      data.positionLines.map((r: any) => {
-        optionPositionLines.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionLineOptions.value = optionPositionLines;
-      positionLineOptionsFilter.value = optionPositionLines;
-
-      let optionPositionExecutives: DataOption[] = [];
-      data.positionExecutives.map((r: any) => {
-        optionPositionExecutives.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionExecutiveOptions.value = optionPositionExecutives;
-      positionExecutiveOptionsFilter.value = optionPositionExecutives;
-
-      let optionPositionExecutiveSides: DataOption[] = [];
-      data.positionExecutiveSides.map((r: any) => {
-        optionPositionExecutiveSides.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
-      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
-
-      let optionPositionLevels: DataOption[] = [];
-      data.positionLevels.map((r: any) => {
-        optionPositionLevels.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionLevelOptions.value = optionPositionLevels;
-      positionLevelOptionsFilter.value = optionPositionLevels;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchData = async () => {
-  if (profileId.value) {
-    showLoader();
-    await http
-      .get(config.API.profileSalaryId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        rows.value = data.map((e: ResponseObject) => ({
-          id: e.id,
-          date: new Date(e.date),
-          amount: e.amount,
-          positionSalaryAmount: e.positionSalaryAmount,
-          mouthSalaryAmount: e.mouthSalaryAmount,
-          oc: e.oc,
-          ocId: e.ocId,
-          position: e.position,
-          positionId: e.positionId,
-          posNo: e.posNo,
-          posNoId: e.posNoId,
-          positionLine: e.positionLine,
-          positionLineId: e.positionLineId,
-          positionPathSide: e.positionPathSide,
-          positionPathSideId: e.positionPathSideId,
-          positionType: e.positionType,
-          positionTypeId: e.positionTypeId,
-          positionLevel: e.positionLevel,
-          positionLevelId: e.positionLevelId,
-          positionExecutive: e.positionExecutive,
-          positionExecutiveId: e.positionExecutiveId,
-          positionExecutiveSide: e.positionExecutiveSide,
-          positionExecutiveSideId: e.positionExecutiveSideId,
-          salaryClass: e.salaryClass,
-          salaryRef: e.salaryRef,
-          salaryStatus: e.salaryStatus,
-          refCommandNo: e.refCommandNo,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        }));
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const onSelected = async (id: string) => {
-  await fetchPositionNumber(id);
-};
-
-const fetchOrganization = async (id: string) => {
-  if (selected.value != "") {
-    showLoader();
-    await http
-      .get(config.API.organizationName(id))
-      .then((res) => {
-        let data = res.data.result;
-        ocId.value = data;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchPositionNumber = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.getPositionNumberIdByOcId(id))
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      posNoOptions.value = option;
-      posNoOptionsFilter.value = option;
-    })
-    .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 = async () => {
-  const row = rows.value[rowIndex.value];
-  date.value = row.date;
-  amount.value = row.amount;
-  positionSalaryAmount.value = row.positionSalaryAmount;
-  mouthSalaryAmount.value = row.mouthSalaryAmount;
-  await onSelected(row.ocId);
-  selected.value = row.ocId;
-  positionId.value = row.positionId;
-  posNoId.value = row.posNoId;
-  positionLineId.value = row.positionLineId;
-  positionPathSideId.value = row.positionPathSideId;
-  positionTypeId.value = row.positionTypeId;
-  positionLevelId.value = row.positionLevelId;
-  positionExecutiveId.value = row.positionExecutiveId;
-  positionExecutiveSideId.value = row.positionExecutiveSideId;
-  salaryClass.value = row.salaryClass;
-  salaryRef.value = row.salaryRef;
-  refCommandNo.value = row.refCommandNo;
-  id.value = row.id;
-  await fetchPositionNumber(row.ocId);
-};
-
-/**
- * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
- */
-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();
-};
-
-/**
- * gen ตำแหน่ง (รายละเอียด)
- */
-const templateDetail = async () => {
-  await fetchOrganization(selected.value);
-  salaryClass.value = "";
-  if (ocId.value != "") {
-    salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
-  }
-
-  const positionF = positionOptions.value.filter(
-    (r: DataOption) => r.id == positionId.value
-  );
-  if (positionF.length > 0) {
-    salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
-  }
-
-  const posNoF = posNoOptions.value.filter(
-    (r: DataOption) => r.id == posNoId.value
-  );
-  if (posNoF.length > 0) {
-    salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
-  }
-
-  const positionLineF = positionLineOptions.value.filter(
-    (r: DataOption) => r.id == positionLineId.value
-  );
-  if (positionLineF.length > 0) {
-    salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
-  }
-
-  const positionPathSideF = positionSideOptions.value.filter(
-    (r: DataOption) => r.id == positionPathSideId.value
-  );
-  if (positionPathSideF.length > 0) {
-    salaryClass.value =
-      salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
-  }
-
-  const positionTypeF = positionTypeOptions.value.filter(
-    (r: DataOption) => r.id == positionTypeId.value
-  );
-  if (positionTypeF.length > 0) {
-    salaryClass.value =
-      salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
-  }
-
-  const positionLevelF = positionLevelOptions.value.filter(
-    (r: DataOption) => r.id == positionLevelId.value
-  );
-  if (positionLevelF.length > 0) {
-    salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
-  }
-
-  const positionExecutiveF = positionExecutiveOptions.value.filter(
-    (r: DataOption) => r.id == positionExecutiveId.value
-  );
-  if (positionExecutiveF.length > 0) {
-    salaryClass.value =
-      salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
-  }
-};
-
-/**
- * กดบันทึกใน 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.profileSalaryId(profileId.value), {
-        date: dateToISO(date.value),
-        amount: amount.value,
-        positionSalaryAmount: positionSalaryAmount.value,
-        mouthSalaryAmount: mouthSalaryAmount.value,
-        ocId: selected.value,
-        positionId: positionId.value,
-        posNoId: posNoId.value,
-        positionLineId: positionLineId.value,
-        positionPathSideId: positionPathSideId.value,
-        positionTypeId: positionTypeId.value,
-        positionLevelId: positionLevelId.value,
-        positionExecutiveId: positionExecutiveId.value,
-        positionExecutiveSideId: positionExecutiveSideId.value,
-        salaryClass: salaryClass.value,
-        salaryRef: salaryRef.value,
-        refCommandNo: refCommandNo.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.profileSalaryId(id.value), {
-      date: dateToISO(date.value),
-      amount: amount.value,
-      positionSalaryAmount: positionSalaryAmount.value,
-      mouthSalaryAmount: mouthSalaryAmount.value,
-      ocId: selected.value,
-      positionId: positionId.value,
-      posNoId: posNoId.value,
-      positionLineId: positionLineId.value,
-      positionPathSideId: positionPathSideId.value,
-      positionTypeId: positionTypeId.value,
-      positionLevelId: positionLevelId.value,
-      positionExecutiveId: positionExecutiveId.value,
-      positionExecutiveSideId: positionExecutiveSideId.value,
-      salaryClass: salaryClass.value,
-      salaryRef: salaryRef.value,
-      refCommandNo: refCommandNo.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.profileSalaryId(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;
-  amount.value = props.row.amount;
-  positionSalaryAmount.value = props.row.positionSalaryAmount;
-  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
-  await onSelected(props.row.ocId);
-  selected.value = props.row.ocId;
-  positionId.value = props.row.positionId;
-  posNoId.value = props.row.posNoId;
-  positionLineId.value = props.row.positionLineId;
-  positionPathSideId.value = props.row.positionPathSideId;
-  positionTypeId.value = props.row.positionTypeId;
-  positionLevelId.value = props.row.positionLevelId;
-  positionExecutiveId.value = props.row.positionExecutiveId;
-  positionExecutiveSideId.value = props.row.positionExecutiveSideId;
-  salaryClass.value = props.row.salaryClass;
-  salaryRef.value = props.row.salaryRef;
-  refCommandNo.value = props.row.refCommandNo;
-  id.value = props.row.id;
-  await checkRowPage();
-};
-
-/**
- * กดปุ่มเพิ่มบน table
- */
-const addData = () => {
-  selected.value = "";
-  modalEdit.value = false;
-  modal.value = true;
-  edit.value = true;
-  date.value = new Date();
-  date.value = new Date();
-  amount.value = null;
-  positionSalaryAmount.value = null;
-  mouthSalaryAmount.value = null;
-  ocId.value = "";
-  positionId.value = "";
-  posNoId.value = "";
-  positionLineId.value = "";
-  positionPathSideId.value = "";
-  positionTypeId.value = "";
-  positionLevelId.value = "";
-  positionExecutiveId.value = "";
-  positionExecutiveSideId.value = "";
-  salaryClass.value = "";
-  refSelected.value = null;
-  salaryRef.value = "";
-  refCommandNo.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;
-};
-
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
-const clickEditRowRef = () => {
-  editRow.value = true;
-  salaryRef.value = refSelected.value?.name;
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsObject) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileSalaryHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      rowsHistory.value = data.map((e: ResponseObject) => ({
-        id: e.id,
-        date: new Date(e.date),
-        amount: e.amount,
-        positionSalaryAmount: e.positionSalaryAmount,
-        mouthSalaryAmount: e.mouthSalaryAmount,
-        oc: e.oc,
-        ocId: e.ocId,
-        position: e.position,
-        positionId: e.positionId,
-        posNo: e.posNo,
-        posNoId: e.posNoId,
-        positionLine: e.positionLine,
-        positionLineId: e.positionLineId,
-        positionPathSide: e.positionPathSide,
-        positionPathSideId: e.positionPathSideId,
-        positionType: e.positionType,
-        positionTypeId: e.positionTypeId,
-        positionLevel: e.positionLevel,
-        positionLevelId: e.positionLevelId,
-        positionExecutive: e.positionExecutive,
-        positionExecutiveId: e.positionExecutiveId,
-        positionExecutiveSide: e.positionExecutiveSide,
-        positionExecutiveSideId: e.positionExecutiveSideId,
-        salaryClass: e.salaryClass,
-        salaryRef: e.salaryRef,
-        refCommandNo: e.refCommandNo,
-        salaryStatus: e.salaryStatus,
-        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-cash"
-        :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="
-                  props.row.salaryStatus !== 'DEATH' &&
-                  (col.name == 'positionSalaryAmount' ||
-                    col.name == 'mouthSalaryAmount' ||
-                    col.name == 'amount')
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-              </div>
-              <div
-                v-else-if="
-                  props.row.salaryStatus === 'DEATH' && col.name == 'position'
-                "
-                class="table_ellipsis"
-              >
-                ถึงแก่กรรม
-              </div>
-              <div
-                v-else-if="
-                  props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'
-                "
-                class="table_ellipsis"
-              >
-                -
-              </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 full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader tittle="ตำแหน่ง/เงินเดือน" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    v-if="edit"
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="selected"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                  <q-tree
-                    v-else
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  >
-                    <template v-slot:default-header="prop">
-                      <div class="row items-center">
-                        <div
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
-                          {{ prop.node.label }}
-                        </div>
-                        <div v-else>
-                          {{ prop.node.label }}
-                        </div>
-                      </div>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <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
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                              (val:string) =>
-                                !!val ||
-                                `${'กรุณาเลือกวัน เดือน ปี'}`,
-                            ]"
-                            :label="`${'วัน เดือน ปี'}`"
-                            hide-bottom-space
-                          >
-                            <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">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="posNoId"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                        ]"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="posNoOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'1'
-                      ) "
-                      />
-                    </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="positionId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                        :label="`${'ตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionSideOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
-                      ) "
-                      />
-                    </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="positionTypeId"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
-                        ]"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionTypeOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
-                      ) "
-                      />
-                    </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="positionLineId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
-                        :label="`${'สายงาน'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLineOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
-                      ) "
-                      />
-                    </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="positionLevelId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        :label="`${'ระดับ'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLevelOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
-                      ) "
-                      />
-                    </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="positionExecutiveId"
-                        :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionExecutiveOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </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-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div> -->
-
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </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'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div
-            v-else-if="
-              col.name == 'positionSalaryAmount' ||
-              col.name == 'mouthSalaryAmount' ||
-              col.name == 'amount'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-          </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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue b/src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
deleted file mode 100644
index f0da070c9..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
+++ /dev/null
@@ -1,2058 +0,0 @@
-<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 CurrencyInput from "@/components/CurruncyInput.vue";
-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 {
-  RequestItemsEmployee,
-  DataPropsEmployee,
-} from "@/modules/04_registry/interface/request/Salary";
-import type { ResponseObjectEmployee } from "@/modules/04_registry/interface/response/Salary";
-import type {
-  DataOption,
-  treeTab,
-} 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,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogMessageNotify,
-} = mixin;
-const route = useRoute();
-const id = ref<string>("");
-const date = ref<Date>(new Date());
-const amount = ref<number | undefined>(0);
-const positionSalaryAmount = ref<number | undefined>(0);
-const mouthSalaryAmount = ref<number | undefined>(0);
-const search = ref<string>("");
-const refCommandNo = ref<any>();
-const expanded = ref<string[]>([]);
-const selected = ref<string>("");
-const nodesTree = ref<treeTab[]>([]);
-
-const posNoId = ref<string>("");
-const posNoEmployee = ref<string>("");
-const posNoOptions = ref<DataOption[]>([]);
-const posNoOptionsFilter = ref<DataOption[]>([]);
-
-const employeePositionId = ref<string>("");
-const employeePositionOptions = ref<DataOption[]>([]);
-const employeePositionOptionsFilter = ref<DataOption[]>([]);
-
-const employeePositionSideId = ref<string>("");
-const employeePositionSideOptions = ref<DataOption[]>([]);
-const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
-
-const employeeLevelId = ref<string>("");
-const employeeLevelOptions = ref<DataOption[]>([]);
-const employeeLevelOptionsFilter = ref<DataOption[]>([]);
-
-const employeeGroupId = ref<string>("");
-const employeeGroupOptions = ref<DataOption[]>([]);
-const employeeGroupOptionsFilter = ref<DataOption[]>([]);
-
-const agencyId = ref<string>("");
-const agencyOptions = ref<DataOption[]>([]);
-const agencyOptionsFilter = ref<DataOption[]>([]);
-
-const refSelected = ref<DataOption | null>(null);
-const refOptions = ref<DataOption[]>([
-  {
-    id: "17",
-    name: "****************  ข้าราชการสามัญ  **********************",
-    disable: true,
-  },
-  {
-    id: "18",
-    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "19",
-    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "21",
-    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const refOptionsFilter = ref<DataOption[]>([
-  {
-    id: "17",
-    name: "****************  ข้าราชการสามัญ  **********************",
-    disable: true,
-  },
-  {
-    id: "18",
-    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "19",
-    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const salaryClass = ref<string>();
-const salaryRef = 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<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
-const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
-const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
-const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
-const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
-const rowsHistory = ref<ResponseObjectEmployee[]>([]); //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<ResponseObjectEmployee[]>([]);
-const filter = ref<string>(""); //search data table
-const visibleColumns = ref<String[]>([]);
-profileData.salary.columns.length == 0
-  ? (visibleColumns.value = [
-      "date",
-      "amount",
-      "positionSalaryAmount",
-      "mouthSalaryAmount",
-      "oc",
-      "positionEmployeePosition",
-      "posNoEmployee",
-      "positionEmployeePositionSide",
-      "positionEmployeeLevel",
-      "positionEmployeeGroup",
-      //   "salaryClass",
-      "salaryRef",
-      "refCommandNo",
-    ])
-  : (visibleColumns.value = profileData.salary.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: "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: "positionSalaryAmount",
-  //     align: "left",
-  //     label: "เงินประจำตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionSalaryAmount",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  //   {
-  //     name: "mouthSalaryAmount",
-  //     align: "left",
-  //     label: "เงินค่าตอบแทนรายเดือน",
-  //     sortable: true,
-  //     field: "mouthSalaryAmount",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  {
-    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: "positionEmployeePosition",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "positionEmployeePosition",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNoEmployee",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNoEmployee",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeePositionSide",
-    align: "left",
-    label: "ด้านของตำแหน่ง",
-    sortable: true,
-    field: "positionEmployeePositionSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeeLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionEmployeeLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeeGroup",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "positionEmployeeGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  //   {
-  //     name: "salaryClass",
-  //     align: "left",
-  //     label: "ตำแหน่ง (รายละเอียด)",
-  //     sortable: true,
-  //     field: "salaryClass",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  {
-    name: "salaryRef",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "salaryRef",
-    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" }),
-  },
-]);
-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: "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: "positionSalaryAmount",
-  //     align: "left",
-  //     label: "เงินประจำตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionSalaryAmount",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  //   {
-  //     name: "mouthSalaryAmount",
-  //     align: "left",
-  //     label: "เงินค่าตอบแทนรายเดือน",
-  //     sortable: true,
-  //     field: "mouthSalaryAmount",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  {
-    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: "positionEmployeePosition",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "positionEmployeePosition",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNoEmployee",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNoEmployee",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeePositionSide",
-    align: "left",
-    label: "ด้านของตำแหน่ง",
-    sortable: true,
-    field: "positionEmployeePositionSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeeLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionEmployeeLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeeGroup",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "positionEmployeeGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  //   {
-  //     name: "salaryClass",
-  //     align: "left",
-  //     label: "ตำแหน่ง (รายละเอียด)",
-  //     sortable: true,
-  //     field: "salaryClass",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  {
-    name: "salaryRef",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "salaryRef",
-    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: "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",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "oc",
-  "positionEmployeePosition",
-  "posNoEmployee",
-  "positionEmployeePositionSide",
-  "positionEmployeeLevel",
-  "positionEmployeeGroup",
-  //   "salaryClass",
-  "salaryRef",
-  "refCommandNo",
-  "createdFullName",
-  "createdAt",
-]);
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("salary", count);
-});
-
-onMounted(async () => {
-  await fetchData();
-  await fetchDataSelector();
-});
-
-const fetchDataSelector = async () => {
-  showLoader();
-  await fetchEmployeePosition();
-  await fetchEmployeePositionSide();
-  await fetchEmployeeLevel();
-  await fetchEmployeeGroup();
-  await fetchAgency();
-  await nodeTree();
-  hideLoader();
-};
-// ตำแหน่ง
-const fetchEmployeePosition = 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() });
-      });
-
-      employeePositionOptions.value = option;
-      employeePositionOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-};
-// ด้านของตำแหน่ง
-const fetchEmployeePositionSide = async () => {
-  await http
-    .get(config.API.positionEmployeePositionSide)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-
-      employeePositionSideOptions.value = option;
-      employeePositionSideOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-};
-// ระดับ
-const fetchEmployeeLevel = async () => {
-  await http
-    .get(config.API.positionEmployeeLevel)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-
-      employeeLevelOptions.value = option;
-      employeeLevelOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-};
-// กลุ่มงาน
-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;
-      employeeGroupOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-};
-
-// สังกัด
-const fetchAgency = async () => {
-  await http
-    .get(config.API.organizationRoot)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.label.toString() });
-      });
-
-      agencyOptions.value = option;
-      agencyOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-};
-
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileOrganizRoot)
-    .then((res: any) => {
-      const data = res.data.result;
-      nodesTree.value = data;
-      if (data.length > 0) {
-        expanded.value = [data[0].id];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const selectAgency = (val: string) => {
-  fetchPositionNumber(val);
-  clickEditRow();
-};
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "posNo":
-      update(() => {
-        posNoOptions.value = posNoOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeePosition":
-      update(() => {
-        employeePositionOptions.value =
-          employeePositionOptionsFilter.value.filter(
-            (v: DataOption) => v.name.indexOf(val) > -1
-          );
-      });
-      break;
-    case "employeePositionSide":
-      update(() => {
-        employeePositionSideOptions.value =
-          employeePositionSideOptionsFilter.value.filter(
-            (v: DataOption) => v.name.indexOf(val) > -1
-          );
-      });
-      break;
-    case "employeeLevel":
-      update(() => {
-        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "employeeGroup":
-      update(() => {
-        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "agency":
-      update(() => {
-        agencyOptions.value = agencyOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "ref":
-      update(() => {
-        refOptions.value = refOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const fetchData = async () => {
-  if (profileId.value) {
-    showLoader();
-    await http
-      .get(config.API.profileSalaryEmployeeId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObjectEmployee) => {
-          rows.value.push({
-            id: e.id,
-            date: new Date(e.date),
-            amount: e.amount,
-            positionSalaryAmount: e.positionSalaryAmount,
-            mouthSalaryAmount: e.mouthSalaryAmount,
-            oc: e.oc,
-            ocId: e.ocId,
-            posNo: e.posNo,
-            posNoId:
-              e.posNoId !== "00000000-0000-0000-0000-000000000000"
-                ? e.posNoId
-                : "",
-            posNoEmployee: e.posNoEmployee,
-            positionEmployeeGroup: e.positionEmployeeGroup,
-            positionEmployeeGroupId: e.positionEmployeeGroupId,
-            positionEmployeeLevel: e.positionEmployeeLevel,
-            positionEmployeeLevelId: e.positionEmployeeLevelId,
-            positionEmployeePosition: e.positionEmployeePosition,
-            positionEmployeePositionId: e.positionEmployeePositionId,
-            positionEmployeePositionSide: e.positionEmployeePositionSide,
-            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
-            salaryClass: e.salaryClass,
-            salaryRef: e.salaryRef,
-            refCommandNo: e.refCommandNo,
-            salaryStatus: e.salaryStatus,
-            //   refCommandDate: new Date(e.refCommandDate),
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchPositionNumber = async (id: string) => {
-  //   showLoader();
-  if (id == null || id == "") return;
-  await http
-    .get(config.API.getPositionNumberIdByOcId(id))
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      posNoOptions.value = option;
-      posNoOptionsFilter.value = option;
-    })
-    .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 = async () => {
-  const row = rows.value[rowIndex.value];
-  date.value = row.date;
-  amount.value = row.amount;
-  positionSalaryAmount.value = row.positionSalaryAmount;
-  mouthSalaryAmount.value = row.mouthSalaryAmount;
-  //   positionId.value = row.positionId;
-  //   posNoId.value = row.posNoId;
-  //   positionLineId.value = row.positionLineId;
-  //   positionPathSideId.value = row.positionPathSideId;
-  //   positionTypeId.value = row.positionTypeId;
-  //   positionLevelId.value = row.positionLevelId;
-  //   positionExecutiveId.value = row.positionExecutiveId;
-  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
-  posNoId.value = row.posNoId ?? "";
-  posNoEmployee.value = row.posNoEmployee ?? "";
-  employeePositionId.value = row.positionEmployeePositionId ?? "";
-  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
-  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
-  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
-  agencyId.value = row.ocId ?? "";
-
-  salaryClass.value = row.salaryClass ?? "";
-  salaryRef.value = row.salaryRef ?? "";
-  refCommandNo.value = row.refCommandNo ?? "";
-  id.value = row.id;
-  await fetchPositionNumber(row.ocId ?? "");
-};
-
-/**
- * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
- */
-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();
-};
-
-/**
- * gen ตำแหน่ง (รายละเอียด)
- */
-const templateDetail = async () => {
-  //   salaryClass.value = "";
-  //   if (ocId.value != "") {
-  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
-  //   }
-  //   const positionF = positionOptions.value.filter(
-  //     (r: DataOption) => r.id == positionId.value
-  //   );
-  //   if (positionF.length > 0) {
-  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
-  //   }
-  //   const posNoF = posNoOptions.value.filter(
-  //     (r: DataOption) => r.id == posNoId.value
-  //   );
-  //   if (posNoF.length > 0) {
-  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
-  //   }
-  //   const positionLineF = positionLineOptions.value.filter(
-  //     (r: DataOption) => r.id == positionLineId.value
-  //   );
-  //   if (positionLineF.length > 0) {
-  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
-  //   }
-  //   const positionPathSideF = positionSideOptions.value.filter(
-  //     (r: DataOption) => r.id == positionPathSideId.value
-  //   );
-  //   if (positionPathSideF.length > 0) {
-  //     salaryClass.value =
-  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
-  //   }
-  //   const positionTypeF = positionTypeOptions.value.filter(
-  //     (r: DataOption) => r.id == positionTypeId.value
-  //   );
-  //   if (positionTypeF.length > 0) {
-  //     salaryClass.value =
-  //       salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
-  //   }
-  //   const positionLevelF = positionLevelOptions.value.filter(
-  //     (r: DataOption) => r.id == positionLevelId.value
-  //   );
-  //   if (positionLevelF.length > 0) {
-  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
-  //   }
-  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
-  //     (r: DataOption) => r.id == positionExecutiveId.value
-  //   );
-  //   if (positionExecutiveF.length > 0) {
-  //     salaryClass.value =
-  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
-  //   }
-};
-
-/**
- * กดบันทึกใน dialog
- */
-const clickSave = async () => {
-  // dialogConfirm($q, () => SaveData());
-  // if (amount.value == 0) {
-  //   amount.value = null;
-  // }
-  await myForm.value.validate().then(async (result: boolean) => {
-    if (result && agencyId.value) {
-      if (modalEdit.value) {
-        dialogConfirm(
-          $q,
-          async () => {
-            await editData();
-          },
-          "ยืนยันการแก้ไขข้อมูล",
-          "ต้องการยืนยันการแก้ไขข้อมูลนี้หรือไม่ ?"
-        );
-      } else {
-        dialogConfirm(
-          $q,
-          async () => {
-            await saveData();
-          },
-          "ยืนยันการเพิ่มข้อมูล",
-          "ต้องการยืนยันการเพิ่มข้อมูลนี้หรือไม่ ?"
-        );
-      }
-    } else if (result && agencyId.value == "") {
-      dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน");
-    }
-  });
-};
-
-/**
- * บันทึกเพิ่มข้อมูล
- */
-const saveData = async () => {
-  if (profileId.value) {
-    showLoader();
-    await http
-      .post(config.API.profileSalaryEmployeeId(profileId.value), {
-        amount: amount.value,
-        date: dateToISO(date.value),
-        positionSalaryAmount: positionSalaryAmount.value,
-        mouthSalaryAmount: mouthSalaryAmount.value,
-        ocId: agencyId.value,
-        //   posNoId: posNoId.value,
-        posNoEmployee: posNoEmployee.value,
-        positionEmployeeGroupId: employeeGroupId.value,
-        positionEmployeeLevelId: employeeLevelId.value,
-        positionEmployeePositionId: employeePositionId.value,
-        positionEmployeePositionSideId: employeePositionSideId.value,
-        salaryClass: salaryClass.value,
-        salaryRef: salaryRef.value,
-        refCommandNo: refCommandNo.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.profileSalaryEmployeeId(id.value), {
-      amount: amount.value,
-      date: dateToISO(date.value),
-      positionSalaryAmount: positionSalaryAmount.value,
-      mouthSalaryAmount: mouthSalaryAmount.value,
-      ocId: agencyId.value,
-      //   posNoId: posNoId.value,
-      posNoEmployee: posNoEmployee.value,
-      positionEmployeeGroupId: employeeGroupId.value,
-      positionEmployeeLevelId: employeeLevelId.value,
-      positionEmployeePositionId: employeePositionId.value,
-      positionEmployeePositionSideId: employeePositionSideId.value,
-      salaryClass: salaryClass.value,
-      salaryRef: salaryRef.value,
-      refCommandNo: refCommandNo.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * ลบข้อมูล
- */
-const fetchDataDelete = async () => {
-  showLoader();
-  await http
-    .delete(config.API.profileSalaryId(id.value))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- *  dialog ลบข้อมูล
- */
-const clickDelete = async () => {
-  dialogMessage(
-    $q,
-    "ลบข้อมูล",
-    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-    "delete",
-    "ยืนยัน",
-    "red",
-    async () => await fetchDataDelete(),
-    async () => await fetchData(),
-    false
-  );
-};
-
-/**
- * กดปิด dialog
- */
-const clickClose = async () => {
-  if (editRow.value == true) {
-    dialogMessage(
-      $q,
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
-      "info",
-      "ยืนยัน",
-      "primary",
-      async () => {
-        modal.value = false;
-        next.value = false;
-        previous.value = false;
-      },
-      undefined,
-      false
-    );
-  } else {
-    modal.value = false;
-    next.value = false;
-    previous.value = false;
-  }
-};
-
-/**
- * กดเลือกข้อมูลที่จะแก้ไข
- * @param props ค่า props ใน row ที่เลือก
- */
-const selectData = async (props: DataPropsEmployee) => {
-  modalEdit.value = true;
-  modal.value = true;
-  edit.value = false;
-  rawItem.value = props.row;
-  rowIndex.value = props.rowIndex;
-  date.value = props.row.date;
-  amount.value = props.row.amount;
-  positionSalaryAmount.value = props.row.positionSalaryAmount;
-  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
-
-  posNoId.value = props.row.posNoId ?? "";
-  posNoEmployee.value = props.row.posNoEmployee ?? "";
-  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
-  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
-  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
-  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
-  agencyId.value = props.row.ocId ?? "";
-
-  //   refSelected.value = props.row
-  salaryClass.value = props.row.salaryClass ?? "";
-  salaryRef.value = props.row.salaryRef ?? "";
-  refCommandNo.value = props.row.refCommandNo ?? "";
-  id.value = props.row.id;
-  await fetchPositionNumber(props.row.ocId ?? "");
-  await checkRowPage();
-};
-
-/**
- * กดปุ่มเพิ่มบน table
- */
-const addData = () => {
-  modalEdit.value = false;
-  modal.value = true;
-  edit.value = true;
-  date.value = new Date();
-  amount.value = undefined;
-  positionSalaryAmount.value = undefined;
-  mouthSalaryAmount.value = undefined;
-
-  posNoId.value = "";
-  posNoEmployee.value = "";
-  employeePositionId.value = "";
-  employeePositionSideId.value = "";
-  employeeLevelId.value = "";
-  employeeGroupId.value = "";
-  agencyId.value = "";
-  agencyOptions.value = [];
-
-  salaryClass.value = "";
-  refSelected.value = null;
-  salaryRef.value = "";
-  refCommandNo.value = "";
-};
-
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  if (editRow.value == true) {
-    dialogMessage(
-      $q,
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
-      "info",
-      "ยืนยัน",
-      "primary",
-      async () => {
-        edit.value = false;
-        await checkRowPage();
-        await getData();
-      },
-      undefined,
-      false
-    );
-  } else {
-    edit.value = false;
-    await checkRowPage();
-  }
-};
-
-const onSelected = async (id: string) => {
-  await fetchPositionNumber(id);
-};
-
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
-const clickEditRow = () => {
-  editRow.value = true;
-};
-
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
-const clickEditRowRef = () => {
-  editRow.value = true;
-  salaryRef.value = refSelected.value?.name;
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsEmployee) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileSalaryEmployeeHisId(row.id))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObjectEmployee) => {
-        rowsHistory.value.push({
-          id: e.id,
-          date: new Date(e.date),
-          amount: e.amount,
-          positionSalaryAmount: e.positionSalaryAmount,
-          mouthSalaryAmount: e.mouthSalaryAmount,
-          oc: e.oc,
-          ocId: e.ocId,
-          posNo: e.posNo,
-          posNoId: e.posNoId,
-          posNoEmployee: e.posNoEmployee,
-          positionEmployeeGroup: e.positionEmployeeGroup,
-          positionEmployeeGroupId: e.positionEmployeeGroupId,
-          positionEmployeeLevel: e.positionEmployeeLevel,
-          positionEmployeeLevelId: e.positionEmployeeLevelId,
-          positionEmployeePosition: e.positionEmployeePosition,
-          positionEmployeePositionId: e.positionEmployeePositionId,
-          positionEmployeePositionSide: e.positionEmployeePositionSide,
-          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
-          salaryClass: e.salaryClass,
-          salaryRef: e.salaryRef,
-          refCommandNo: e.refCommandNo,
-          salaryStatus: e.salaryStatus,
-          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-cash"
-        :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 == 'positionSalaryAmount' ||
-                  col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount'
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-              </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: 60vw; max-width: 80vw">
-      <q-form ref="myForm">
-        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    v-if="edit"
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="agencyId"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                  <q-tree
-                    v-else
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  >
-                    <template v-slot:default-header="prop">
-                      <div class="row items-center">
-                        <div
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
-                          {{ prop.node.label }}
-                        </div>
-                        <div v-else>
-                          {{ prop.node.label }}
-                        </div>
-                      </div>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <q-card class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 60vh">
-                  <div class="row col-12 q-col-gutter-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
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                                (val:string) =>
-                                  !!val ||
-                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
-                              ]"
-                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
-                            hide-bottom-space
-                          >
-                            <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">
-                      <!-- <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="posNoId"
-                      :rules="[
-                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                          ]"
-                      :label="`${'ตำแหน่งเลขที่'}`"
-                      @update:modelValue="clickEditRow"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="posNoOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
-                        ) "
-                    /> -->
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="posNoEmployee"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      />
-                    </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="employeePositionId"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                        :label="`${'ตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="employeePositionOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
-                        ) "
-                      />
-                    </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"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกด้านของตำแหน่ง'}`]"
-                        v-model="employeePositionSideId"
-                        :label="`${'ด้านของตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="employeePositionSideOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
-                        ) "
-                      />
-                    </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="employeeLevelId"
-                        :label="`${'ระดับ'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        option-label="name"
-                        :options="employeeLevelOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
-                        ) "
-                      />
-                    </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="employeeGroupId"
-                        :label="`${'กลุ่มงาน'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="employeeGroupOptions"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกกุ่มงาน'}`]"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
-                        ) "
-                      />
-                    </div>
-                    <!-- <div class="col-xs-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="agencyId"
-                        :label="`${'สังกัด'}`"
-                        @update:model-value="(value:string) => selectAgency(value)"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="agencyOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
-                        ) "
-                      />
-                    </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="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
-                        :label="`${'ค่าจ้าง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      /> -->
-                      <CurrencyInput
-                        lazy-rules
-                        v-model="amount"
-                        :edit="edit"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
-                        :options="{
-                          currency: 'THB',
-                        }"
-                        :label="`${'ค่าจ้าง'}`"
-                      />
-                    </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-4 col-sm-4 col-md-4">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="positionSalaryAmount"
-                      :label="`${'เงินประจำตำแหน่ง'}`"
-                      @update:modelValue="clickEditRow"
-                      type="number"
-                      hide-bottom-space
-                    />
-                  </div>
-                  <div class="col-xs-4 col-sm-4 col-md-4">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="mouthSalaryAmount"
-                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                      @update:modelValue="clickEditRow"
-                      type="number"
-                      hide-bottom-space
-                    />
-                  </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="salaryClass"
-                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                      @update:modelValue="clickEditRow"
-                      hide-bottom-space
-                      autogrow
-                    >
-                    </q-input>
-                  </div> -->
-
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกต้นแบบ (template) เอกสารอ้างอิง'}`]"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
-                        ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </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="date2Thai(refCommandDate)"
-                          :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>
-                </q-scroll-area>
-              </q-card>
-            </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 == 'positionSalaryAmount' ||
-              col.name == 'mouthSalaryAmount' ||
-              col.name == 'amount'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
-          </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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Talent.vue b/src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
deleted file mode 100644
index d802ba6ba..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
+++ /dev/null
@@ -1,692 +0,0 @@
-<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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue b/src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
deleted file mode 100644
index 4f6bd8763..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Train.vue b/src/modules/08_registryEmployee/components/EditEmployee/Train.vue
deleted file mode 100644
index 0876bb128..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Train.vue
+++ /dev/null
@@ -1,1136 +0,0 @@
-<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/Train";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Train";
-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 name = ref<string>();
-const topic = ref<string>();
-const yearly = ref<number>(new Date().getFullYear());
-const place = ref<string>();
-const duration = ref<string>();
-const department = ref<string>();
-const numberOrder = ref<string>();
-const dateOrder = ref<Date>(new Date());
-const startDate = ref<Date>(new Date());
-const endDate = ref<Date>(new Date());
-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.train.columns.length == 0
-  ? (visibleColumns.value = [
-      "name",
-      "topic",
-      "yearly",
-      "place",
-      "duration",
-      "department",
-      "numberOrder",
-      "dateOrder",
-      "startDate",
-      "endDate",
-    ])
-  : (visibleColumns.value = profileData.train.columns);
-const columns = ref<QTableProps["columns"]>([
-  {
-    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: "topic",
-    align: "left",
-    label: "หัวข้อการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "topic",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "endDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "yearly",
-    align: "left",
-    label: "ปีที่อบรม (พ.ศ.)",
-    sortable: true,
-    field: "yearly",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "place",
-    align: "left",
-    label: "สถานที่ฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "place",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "department",
-    align: "left",
-    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "department",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "numberOrder",
-    align: "left",
-    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
-    sortable: true,
-    field: "numberOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateOrder",
-    align: "left",
-    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
-    sortable: true,
-    field: "dateOrder",
-    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: "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: "topic",
-    align: "left",
-    label: "หัวข้อการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "topic",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "endDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "yearly",
-    align: "left",
-    label: "ปีที่อบรม (พ.ศ.)",
-    sortable: true,
-    field: "yearly",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "place",
-    align: "left",
-    label: "สถานที่ฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "place",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "department",
-    align: "left",
-    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
-    sortable: true,
-    field: "department",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "numberOrder",
-    align: "left",
-    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
-    sortable: true,
-    field: "numberOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateOrder",
-    align: "left",
-    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
-    sortable: true,
-    field: "dateOrder",
-    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[]>([
-  "name",
-  "topic",
-  "yearly",
-  "place",
-  "duration",
-  "department",
-  "numberOrder",
-  "dateOrder",
-  "startDate",
-  "endDate",
-  "createdFullName",
-  "createdAt",
-]);
-
-watch(startDate, (count, prevCount) => {
-  minDate.value = new Date(startDate.value);
-});
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("train", count);
-});
-
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = async () => {
-  if (profileId.value) {
-    showLoader();
-    await http
-      .get(config.API.profileTrainId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            name: e.name,
-            topic: e.topic,
-            yearly: e.yearly,
-            place: e.place,
-            duration: e.duration,
-            department: e.department,
-            numberOrder: e.numberOrder,
-            dateOrder: e.dateOrder,
-            startDate: new Date(e.startDate),
-            endDate: new Date(e.endDate),
-            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];
-  name.value = row.name;
-  topic.value = row.topic;
-  yearly.value = row.yearly;
-  place.value = row.place;
-  duration.value = row.duration;
-  department.value = row.department;
-  numberOrder.value = row.numberOrder;
-  dateOrder.value = row.dateOrder;
-  startDate.value = row.startDate;
-  endDate.value = row.endDate;
-  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 SaveData = async () => {
-  await myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modalEdit.value) {
-        await editData();
-      } else {
-        await saveData();
-      }
-    }
-  });
-};
-
-/**
- * บันทึกเพิ่มข้อมูล
- */
-const clickSave = () => {
-  dialogConfirm($q, () => SaveData());
-};
-const saveData = async () => {
-  if (profileId.value) {
-    showLoader();
-    await http
-      .post(config.API.profileTrainId(profileId.value), {
-        id: id.value,
-        name: name.value,
-        topic: topic.value,
-        yearly: yearly.value,
-        place: place.value,
-        duration: duration.value,
-        department: department.value,
-        numberOrder: numberOrder.value,
-        dateOrder: dateOrder.value,
-        startDate: dateToISO(startDate.value),
-        endDate: dateToISO(endDate.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.profileTrainId(id.value), {
-      id: id.value,
-      name: name.value,
-      topic: topic.value,
-      yearly: yearly.value,
-      place: place.value,
-      duration: duration.value,
-      department: department.value,
-      numberOrder: numberOrder.value,
-      dateOrder: dateOrder.value,
-      startDate: dateToISO(startDate.value),
-      endDate: dateToISO(endDate.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.profileTrainId(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;
-  topic.value = props.row.topic;
-  yearly.value = props.row.yearly;
-  place.value = props.row.place;
-  duration.value = props.row.duration;
-  department.value = props.row.department;
-  numberOrder.value = props.row.numberOrder;
-  dateOrder.value = props.row.dateOrder;
-  startDate.value = props.row.startDate;
-  endDate.value = props.row.endDate;
-  id.value = props.row.id;
-  await checkRowPage();
-};
-
-/**
- * กดปุ่มเพิ่มบน table
- */
-const addData = () => {
-  modalEdit.value = false;
-  modal.value = true;
-  edit.value = true;
-  name.value = "";
-  topic.value = "";
-  yearly.value = new Date().getFullYear();
-  place.value = "";
-  duration.value = "";
-  department.value = "";
-  numberOrder.value = "";
-  dateOrder.value = new Date();
-  startDate.value = new Date();
-  endDate.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.profileTrainHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          name: e.name,
-          topic: e.topic,
-          yearly: e.yearly,
-          place: e.place,
-          duration: e.duration,
-          department: e.department,
-          numberOrder: e.numberOrder,
-          dateOrder: e.dateOrder,
-          startDate: new Date(e.startDate),
-          endDate: new Date(e.endDate),
-          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-briefcase"
-        :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 == 'startDate' ||
-                  col.name == 'endDate' ||
-                  col.name == 'dateOrder'
-                "
-                class="table_ellipsis"
-              >
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
-                {{ col.value + 543 }}
-              </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">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="name"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
-                ]"
-                :label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="topic"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
-                ]"
-                :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="startDate"
-                :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)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    :borderless="!edit"
-                    :model-value="date2Thai(startDate)"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
-                    ]"
-                    :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="endDate"
-                :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)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(endDate)"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
-                    ]"
-                    :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="yearly"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-              >
-                <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
-                    :borderless="!edit"
-                    :model-value="yearly + 543"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
-                    :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)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="place"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
-                ]"
-                :label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="duration"
-                :label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="department"
-                :label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="numberOrder"
-                :label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateOrder"
-                :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)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateOrder)"
-                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
-                  >
-                    <!-- :rules="[
-                      (val) =>
-                        !!val ||
-                        `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
-                    ]" -->
-                    <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 == 'startDate' ||
-              col.name == 'endDate' ||
-              col.name == 'createdAt' ||
-              col.name == 'dateOrder'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
-            {{ col.value + 543 }}
-          </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>
diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Work.vue b/src/modules/08_registryEmployee/components/EditEmployee/Work.vue
deleted file mode 100644
index 715849bec..000000000
--- a/src/modules/08_registryEmployee/components/EditEmployee/Work.vue
+++ /dev/null
@@ -1,914 +0,0 @@
-<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
-                    :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
-                    :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
-                    :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>
diff --git a/src/modules/08_registryEmployee/views/Add.vue b/src/modules/08_registryEmployee/views/Add.vue
deleted file mode 100644
index 3f13a49de..000000000
--- a/src/modules/08_registryEmployee/views/Add.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import AddEmployee from "@/modules/08_registryEmployee/components/AddEmployee/Main.vue";
-</script>
-
-<template>
-  <div class="col-12 row">
-    <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information q-mt-sm">
-        <AddEmployee />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.image-size-default {
-  height: 150px;
-  max-width: 15vw;
-}
-
-.image-size-full {
-  height: 160px;
-  max-width: 15vw;
-}
-
-.border-green {
-  border: 5px solid #52c688;
-}
-
-.area-div {
-  background-color: transparent;
-}
-
-.text-header {
-  font-size: 1.2em;
-}
-
-.containerimage {
-  position: relative;
-}
-
-.containerimage:hover .overlay {
-  opacity: 1;
-}
-
-.overlay {
-  background-color: #e4f2ffd2 !important;
-  opacity: 0;
-  padding: 2px !important;
-}
-
-.information:target {
-  padding-top: 84px;
-}
-
-.border-custom {
-  border: 0.5px solid #c3c3c3;
-}
-
-.bg-active-image {
-  background-color: #52c688;
-}
-
-.text-name {
-  font-size: 1.3em;
-  overflow: hidden;
-}
-
-.text-sub {
-  font-size: 1.2em;
-  overflow: hidden;
-  color: var(--q-primary);
-}
-</style>
diff --git a/src/modules/08_registryEmployee/views/EditDetail.vue b/src/modules/08_registryEmployee/views/EditDetail.vue
deleted file mode 100644
index 831555da4..000000000
--- a/src/modules/08_registryEmployee/views/EditDetail.vue
+++ /dev/null
@@ -1,915 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import EducationVue from "@/modules/08_registryEmployee/components/EditEmployee/Education.vue";
-import TrainVue from "@/modules/08_registryEmployee/components/EditEmployee/Train.vue";
-import AssessmentVue from "@/modules/08_registryEmployee/components/EditEmployee/Assessment.vue";
-// import SalaryVue from "@/modules/08_registryEmployee/components/EditEmployee/Salary.vue";
-import SalaryEmployeeVue from "@/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue";
-import DisciplineVue from "@/modules/08_registryEmployee/components/EditEmployee/Discipline.vue";
-import LeaveVue from "@/modules/08_registryEmployee/components/EditEmployee/Leave.vue";
-import TalentVue from "@/modules/08_registryEmployee/components/EditEmployee/Talent.vue";
-import WorkVue from "@/modules/08_registryEmployee/components/EditEmployee/Work.vue";
-// import RecordVue from "@/modules/08_registryEmployee/components/EditEmployee/Record.vue";
-import OtherVue from "@/modules/08_registryEmployee/components/EditEmployee/Other.vue";
-import DocumentVue from "@/modules/08_registryEmployee/components/EditEmployee/Document.vue";
-import Certicate from "@/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue";
-import Information from "@/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue";
-import TempInformation from "@/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue";
-import Address from "@/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue";
-import Family from "@/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue";
-import Employment from "@/modules/08_registryEmployee/components/EditEmployee/Employment.vue";
-
-import type { DataOption } from "@/modules/04_registry/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  dialogMessage,
-  success,
-  showLoader,
-  hideLoader,
-} = mixin;
-const route = useRoute();
-const router = useRouter();
-const imageUrl = ref<any>(null);
-const inputImage = ref<any>(null);
-const fullname = ref<string>("");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const dialog = ref<boolean>(false);
-const dialogShort = ref<boolean>(false);
-const dialogLeave = ref<boolean>(false);
-const dialogImage = ref<boolean>(false);
-const statusEdit = ref<boolean>(false);
-const activeImage = ref<any | null>(null);
-const images = ref<any>([]);
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
-const profileType = ref<string>("");
-const leaveDate = ref<Date>(new Date());
-const leaveDetail = ref<string>("");
-const leaveNumberOrder = ref<string>("");
-const leaveDateOrder = ref<Date>(new Date());
-const reason = ref<string>("");
-const reasonStatus = ref<boolean>(false);
-const leaveReason = ref<string>("");
-const reasonOptions = ref<DataOption[]>([
-  {
-    id: "retire",
-    name: "เกษียณอายุราชการ",
-  },
-  {
-    id: "resign",
-    name: "ลาออก",
-  },
-  {
-    id: "transfer",
-    name: "ให้โอน",
-  },
-  {
-    id: "death",
-    name: "ถึงแก่กรรม",
-  },
-  {
-    id: "layoff",
-    name: "ให้ออก",
-  },
-  {
-    id: "discharge",
-    name: "ปลดออก",
-  },
-  {
-    id: "dismiss",
-    name: "ไล่ออก",
-  },
-  {
-    id: "other",
-    name: "อื่นๆ",
-  },
-]);
-
-// get ข้อมูลทั้งหมด
-const fetchData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-
-        fullname.value = data.fullname;
-        imageUrl.value = data.avatar;
-        position.value = data.position;
-        profileType.value = data.profileType;
-        const reason = reasonOptions.value.filter(
-          (r: DataOption) => r.id == data.leaveReason
-        );
-        if (reason.length > 0) {
-          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
-        } else {
-          leaveReason.value = "";
-        }
-        reasonStatus.value = reason.length > 0 ? true : false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchAvatarHistory = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarHistoryId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        images.value = [];
-        data.map((e: any) => {
-          images.value.push({
-            id: e.id,
-            avatar: e.avatar,
-            avatarId: e.avatarId,
-            createdDate: new Date(e.createdDate),
-            isActive: e.isActive,
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const uploadImage = async (e: any) => {
-  if (profileId.value !== "") {
-    let input = e.target.files;
-    if (input.length > 0) {
-      const formData = new FormData();
-      formData.append("FileData", input[0]);
-      showLoader();
-      await http
-        .post(config.API.profileAvatarId(profileId.value), formData)
-        .then((res) => {})
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-          dialogImage.value = false;
-        });
-      return;
-    }
-  }
-};
-
-const fetchDataDelete = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileAvatarHistoryId(id))
-    .then((res) => {
-      success($q, "ลบรูปภาพสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-      await clickImage();
-    });
-};
-
-const deletePhoto = async (id: string) => {
-  dialogMessage(
-    $q,
-    "ลบข้อมูล",
-    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-    "delete",
-    undefined,
-    "red",
-    () => fetchDataDelete(id),
-    undefined,
-    false
-  );
-};
-
-const selectAvatarHistory = async () => {
-  if (activeImage.value == null) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถเปลี่ยนรูปได้",
-      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .put(config.API.profileAvatarId(profileId.value), {
-        avatar: activeImage.value.avatarId,
-      })
-      .then((res) => {
-        dialogImage.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
-};
-
-const imageActive = (n: any) => {
-  activeImage.value = n;
-};
-
-const imageClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders bg-grey-2 image-size-default": val,
-    "rounded-borders bg-grey-2 image-size-full": !val,
-  };
-};
-
-const getClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders border-green shadow-1": val,
-    "rounded-borders shadow-1": !val,
-  };
-};
-
-const addNewImage = async () => {
-  inputImage.value.click();
-  await imageActive(null);
-};
-
-const clickImage = async () => {
-  await fetchAvatarHistory();
-  dialogImage.value = true;
-};
-
-const closeImage = () => {
-  dialogImage.value = false;
-};
-
-const closeLeave = () => {
-  dialogLeave.value = false;
-};
-
-const closeKp7 = () => {
-  dialog.value = false;
-};
-
-const closeKp7Short = () => {
-  dialogShort.value = false;
-};
-
-const downloadKP7 = () => {};
-
-const downloadKP7Short = () => {};
-
-const downloadFilePDF = async (res: string, fileName: string) => {
-  const link = document.createElement("a");
-  //   link.href = window.URL.createObjectURL(new Blob([res]));
-  link.href = window.URL.createObjectURL(
-    new Blob([res], {
-      type: "application/vnd.ms-excel",
-    })
-  );
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-};
-
-const clickKp7Short = async () => {
-  if (profileId.value !== "") {
-    window.open(config.API.profileKp7ShortId(profileId.value));
-  }
-  //   showLoader();
-  //   await http
-  //     .get(config.API.profileKp7ShortId(profileId.value))
-  //     .then((res) => {
-  //       if (res.data) {
-  //         pdfSrcShort.value = "g==";
-  //         pdfCurrentPageShort.value = 1;
-  //         pdfTotalPageShort.value = 7;
-  //         dialogShort.value = true;
-  //       }
-  //     })
-  //     .catch((e) => {messageError($q, e);})
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
-
-const clickRetire = async () => {
-  if (reasonStatus.value == true) {
-    dialogMessage(
-      $q,
-      "โปรดยืนยัน",
-      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
-      "info",
-      undefined,
-      "primary",
-      Retire,
-      undefined,
-      false
-    );
-  } else {
-    leaveDate.value = new Date();
-    leaveDetail.value = "";
-    leaveNumberOrder.value = "";
-    leaveDateOrder.value = new Date();
-    reason.value = "";
-    dialogLeave.value = true;
-  }
-};
-
-const Retire = async () => {
-  if (profileId.value !== "") {
-    if (reasonStatus.value == true) {
-      showLoader();
-      await http
-        .put(config.API.profileReactive(profileId.value))
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    } else {
-      showLoader();
-      await http
-        .put(config.API.profileDeactive(profileId.value), {
-          leaveDate: dateToISO(leaveDate.value),
-          leaveDetail: leaveDetail.value,
-          leaveNumberOrder: leaveNumberOrder.value,
-          leaveDateOrder: dateToISO(leaveDateOrder.value),
-          reason: reason.value,
-        })
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    }
-  }
-};
-</script>
-
-<template>
-  <div class="col-12 row">
-    <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information q-mt-sm">
-        <!-- <Informationvue
-            v-model:statusEdit="statusEdit"
-            :profileType="profileType"
-          /> -->
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-          :statusAdd="false"
-        />
-      </div>
-      <div id="government" name="16" class="row col-12">
-        <!-- <Government v-model:statusEdit="statusEdit" :statusAdd="false" /> -->
-      </div>
-      <div id="tempInformation" name="19" class="row col-12">
-        <TempInformation v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-
-      <div id="Employment" name="20" class="row col-12 q-mt-md">
-        <Employment v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="address" name="17" class="row col-12">
-        <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="family" name="18" class="row col-12">
-        <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="certicate" name="15" class="row col-12">
-        <Certicate
-          v-model:statusEdit="statusEdit"
-          :statusAdd="false"
-          profileType="employee"
-        />
-      </div>
-      <div id="education" name="2" class="row col-12 q-mt-md">
-        <EducationVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="training" name="3" class="row col-12 q-mt-md">
-        <TrainVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :statusAdd="false"
-          profileType="employee"
-        />
-      </div>
-      <div id="position" name="7" class="row col-12 q-mt-md">
-        <!-- <SalaryVue
-          v-model:statusEdit="statusEdit" :statusAdd="false"
-          v-if="profileType === 'officer'"
-        /> -->
-
-        <SalaryEmployeeVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="rule" name="8" class="row col-12 q-mt-md">
-        <DisciplineVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="leave" name="9" class="row col-12 q-mt-md">
-        <LeaveVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="talent" name="10" class="row col-12 q-mt-md">
-        <TalentVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="work" name="11" class="row col-12 q-mt-md">
-        <WorkVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="other" name="13" class="row col-12 q-mt-md">
-        <OtherVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="document" name="14" class="row col-12 q-my-md">
-        <DocumentVue v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-    </div>
-    <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
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
-            <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>
-        <q-avatar v-else size="65px" rounded class="containerimage">
-          <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
-            <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">
-              {{ fullname }}{{ leaveReason }}
-            </div>
-            <div>{{ position }}</div>
-          </div>
-        </div>
-        <q-space />
-      </div>
-    </q-page-sticky>
-  </div>
-  <q-dialog v-model="dialog" persistent>
-    <q-card style="width: 90vw; max-width: 80vw">
-      <q-card-section class="row items-center q-pb-xs col-12">
-        <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-  <q-dialog v-model="dialogShort" persistent>
-    <q-card style="width: 90vw; max-width: 80vw">
-      <q-card-section class="row items-center q-pb-xs col-12">
-        <q-space />
-        <q-btn
-          @click="downloadKP7Short()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ประวัติแบบย่อ"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7Short"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-card-section class="q-p-sm">
-        <!-- <viewpdf
-            :src="pdfSrcShort"
-            :currentpage="pdfCurrentPageShort"
-            :totalpage="pdfTotalPageShort"
-          ></viewpdf> -->
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-  <!-- Dialog เลือก Image -->
-  <q-dialog v-model="dialogImage" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
-      <q-card-section class="q-py-sm row">
-        <div class="text-h6">เลือกรูปภาพ</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
-        </q-btn>
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
-          <div class="col-3" @click="addNewImage">
-            <div
-              style="
-                height: 160px;
-                max-width: 15vw;
-                display: flex !important;
-                justify-content: center;
-                align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
-              <q-icon name="add" size="60px" color="white" />
-              <strong>อัปโหลดรูปภาพ</strong>
-            </div>
-          </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
-            <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
-                <!-- <div
-                    class="absolute-top bg-transparent cursor-pointer text-right"
-                    style="padding: 5px"
-                  >
-                    <q-btn
-                      icon="delete"
-                      unelevated
-                      round
-                      dense
-                      @click="deletePhoto"
-                      style="color: #ff8080"
-                    />
-                  </div> -->
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
-                  {{ date2Thai(n.createdDate) }}
-
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  />
-                </div>
-              </q-img>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <!-- <q-btn
-            flat
-            round
-            color="red"
-            @click="() => {}"
-            icon="mdi-delete-outline"
-          >
-            <q-tooltip>ลบรูปภาพ</q-tooltip>
-          </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
-          <q-tooltip>เลือกรูปภาพ</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-  <!-- Dialog เลือก เกษียณ -->
-  <q-dialog v-model="dialogLeave" persistent>
-    <q-card style="width: 600px">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >ประเภทการพ้นราชการ
-        </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeLeave"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-toolbar>
-
-      <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">
-            <q-select
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
-              hide-bottom-space
-              :label="`${'ประเภทการพ้นราชการ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="reasonOptions"
-              option-value="id"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  :model-value="date2Thai(leaveDate)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
-                  hide-bottom-space
-                  :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-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveDetail"
-              :rules="[
-                (val) =>
-                  !!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveNumberOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
-              hide-bottom-space
-              :label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDateOrder"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  :model-value="date2Thai(leaveDateOrder)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
-                  hide-bottom-space
-                  :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>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn unelevated label="บันทึก" color="public" @click="Retire"
-          ><!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style>
-.image-size-default {
-  height: 150px;
-  max-width: 15vw;
-}
-
-.image-size-full {
-  height: 160px;
-  max-width: 15vw;
-}
-
-.border-green {
-  border: 5px solid #52c688;
-}
-
-.area-div {
-  background-color: transparent;
-}
-
-.text-header {
-  font-size: 1.2em;
-}
-
-.containerimage {
-  position: relative;
-}
-
-.containerimage:hover .overlay {
-  opacity: 1;
-}
-
-.overlay {
-  background-color: #e4f2ffd2 !important;
-  opacity: 0;
-  padding: 2px !important;
-}
-
-.information:target {
-  padding-top: 84px;
-}
-
-.border-custom {
-  border: 0.5px solid #c3c3c3;
-}
-
-.bg-active-image {
-  background-color: #52c688;
-}
-
-.text-name {
-  font-size: 1.3em;
-  overflow: hidden;
-}
-
-.text-sub {
-  font-size: 1.3em;
-  overflow: hidden;
-  color: var(--q-primary);
-}
-</style>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 1b4b5ac0e..abf4b3f5a 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -15,13 +17,9 @@ import type {
 import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
 
 /** importComponents*/
-import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue";
-import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue";
-import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue";
-
-/** inportStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
+import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue"; //เพิ่มข้อมูลลูกจ้างชั่วคราว
+import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue"; //เลือกหน่วยงานที่รับบรรจุ
+import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue"; //ส่งรายชื่อไปออกคำสั่ง
 
 const $q = useQuasar();
 const router = useRouter();
@@ -35,10 +33,15 @@ const {
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
 
+const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
+const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
+const modalSendOrder = ref<boolean>(false); //popup ส่งไปออกคำสั่ง
+const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อลูกจ้างชั่วคราวที่ต้องการกำหนดตำแหน่ง
+
 /** Table*/
-const rows = ref<DataEmployee[]>([]);
-const maxPage = ref<number>(0);
-const total = ref<number>(0);
+const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
+const maxPage = ref<number>(0); //จำนวนหน้า
+const total = ref<number>(0); //จำนวนข้อมูล
 const queryParams = reactive({
   page: 1,
   pageSize: 10,
@@ -46,11 +49,11 @@ const queryParams = reactive({
   searchField: "fullName",
   searchKeyword: "",
 });
+//ประเภทการค้นหา
 const searchTypeOption = ref<DataOption[]>([
   { id: "fullName", name: "ชื่อ-นามสกุล" },
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -123,15 +126,7 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -192,7 +187,6 @@ const visibleColumns = ref<String[]>([
   "draftPositionEmployee",
   "govAge",
   "dateEmployment",
-  // "dateStart",
   "age",
   "createdAt",
   "dateRetireLaw",
@@ -200,24 +194,11 @@ const visibleColumns = ref<String[]>([
 ]);
 
 /**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
+ * ฟังก์ชันดึงข้อมูลรายชื่อลูกจ้างชั่วคราว
  */
-function updatePagination(newPagination: NewPagination) {
-  queryParams.page = 1;
-  queryParams.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => queryParams.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 async function fetchList() {
   showLoader();
-  http
+  await http
     .get(config.API.registryNew("-temp"), { params: queryParams })
     .then(async (res) => {
       rows.value = await res.data.result.data;
@@ -232,6 +213,10 @@ async function fetchList() {
     });
 }
 
+/**
+ * ฟังก์ชันลบข้อมูลรายชื่อลูกจ้างชั่วคราว
+ * @param id  รายชื่อลูกจ้างชั่วคราวที่ต้องการลบ
+ */
 function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
@@ -243,36 +228,65 @@ function onClickDelete(id: string) {
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
 }
 
+/**
+ * ฟังก์ชันดูข้อมูลรายชื่อลูกจ้างชั่วคราว ไปยัง ทะเบียนประวัติลูกจ้างชั่วคราว
+ * @param id  รายชื่อลูกจ้างชั่วคราวที่ต้องการ
+ */
 function redirectToPageDetail(id: string) {
   router.push(`/registry-temp/${id}`);
 }
 
-/** เพิ่มข้อมูลลูกจ้างชั่วคราว*/
-const modalAddEmployee = ref<boolean>(false);
-
+/**
+ * ฟังก์ชันเปิด popup เพิ่มข้อมูลลูกจ้างชั่วคราว
+ */
 function onClickAddEmployee() {
   modalAddEmployee.value = true;
 }
 
-/** เกำหนดตำแหน่ง */
-const modalPos = ref<boolean>(false);
-const dataRow = ref<DataEmployee>();
+/**
+ * ฟังก์ชันเปิด popup เลือกหน่วยงานที่รับบรรจุ
+ */
 function onClickSelectPos(data: DataEmployee) {
   modalPos.value = true;
   dataRow.value = data;
 }
 
-/** ส่งไปออกคำสั่ง*/
-const modalSendOrder = ref<boolean>(false);
+/**
+ * ฟังก์ชันเปิด popup ส่งรายชื่อไปออกคำสั่ง
+ */
 function onClickSendOrder() {
   modalSendOrder.value = true;
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  queryParams.page = 1;
+  queryParams.pageSize = newPagination.rowsPerPage;
+}
+
+/**
+ * ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า
+ */
+watch(
+  () => queryParams.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
+/**
+ * ทำงานเมื่อมีการเรียกใข้ Components
+ */
 onMounted(async () => {
   await fetchList();
 });
@@ -505,13 +519,13 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <DialogAddEmployee v-model:modal="modalAddEmployee" :fetchData="fetchList" />
+  <DialogAddEmployee v-model:modal="modalAddEmployee" :fetch-data="fetchList" />
 
   <DialogSelectPos
     v-model:modal="modalPos"
-    :dataRow="dataRow"
-    :fetchData="fetchList"
+    :data-row="dataRow"
+    :fetch-data="fetchList"
   />
 
-  <DialogSendOrder v-model:modal="modalSendOrder" :fetchData="fetchList" />
+  <DialogSendOrder v-model:modal="modalSendOrder" :fetch-data="fetchList" />
 </template>
diff --git a/src/modules/08_registryEmployee/views/MainOld.vue b/src/modules/08_registryEmployee/views/MainOld.vue
deleted file mode 100644
index 02b290cc7..000000000
--- a/src/modules/08_registryEmployee/views/MainOld.vue
+++ /dev/null
@@ -1,1045 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QInput, QTableProps } from "quasar";
-import { useRouter } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import { useRegistryEmployeeDataStore } from "@/modules/08_registryEmployee/store";
-
-import type {
-  FormRegistryEmployee,
-  ResponseEmployeeTemp,
-} from "@/modules/08_registryEmployee/interface/request/Main";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import DialogSendToCommand from "@/modules/08_registryEmployee/components/DialogSendToCommand.vue";
-
-// store convert status text
-const dataStore = useRegistryEmployeeDataStore();
-const { statusText } = dataStore;
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  typeRetire,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  date2Thai,
-  dialogRemove,
-  dialogConfirm,
-  dialogMessageNotify,
-} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
-
-const router = useRouter();
-const filterRef = ref<any>(null);
-const filter = ref<string>("");
-const id = ref<string>("");
-
-// visible columns ตารางในหน้าหลัก
-const visibleColumnsEmployeeTemp = ref<String[]>([
-  "no",
-  "fullname",
-  "fullnameOld",
-  "oc",
-  "positionEmployeePosition",
-  "positionEmployeePositionSide",
-  "positionLine",
-  "govAge",
-  "positionEmployeeGroup",
-  "dateAppoint",
-  "refSalary",
-  "dateStart",
-  "createdAt",
-  "salaryDate",
-  "age",
-  "amount",
-  "statustext",
-  "leaveDateOrder",
-  "draftOrganizationOrganization",
-  "currentAgency",
-]);
-
-// คอลัมน์ตารางในหน้าหลัก
-const columns = 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: "draftOrganizationOrganization",
-    align: "left",
-    label: "หน่วยงานที่รับการบรรจุ",
-    sortable: true,
-    field: "draftOrganizationOrganization",
-    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",
-      }),
-  },
-]);
-
-onMounted(async () => {
-  await nodeTree();
-});
-
-// ฟังก์ชั่นเช็คค่า guid แปลงเป็นค่า null
-const checkNull = (text: string) =>
-  text == null
-    ? ""
-    : text == "00000000-0000-0000-0000-000000000000"
-    ? ""
-    : text;
-
-// คลิก icon ส่งไปออกคำสั่ง (เปิด dialog)
-const modaladdOrder = ref<boolean>(false); // dialog ส่งไปออกคำสั่ง
-const clickAddOrder = () => {
-  modaladdOrder.value = true;
-};
-
-// ปิด dialog ส่งไปออกคำสั่ง
-const clickCloseSendModal = () => {
-  modaladdOrder.value = false;
-};
-
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-
-//รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
-  emit("update:filterKeyword2", "");
-};
-
-const updateInput = (value: any) => {
-  emit("update:filterKeyword2", value);
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-  filterKeyword2.value = "";
-};
-
-// เพิ่มข้อมูลลูกจ้าง
-const clickAdd = () => {
-  router.push(`/registry-temp/add`);
-};
-
-// ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (id?: string, status?: string) => {
-  if (!(status == "REPORT" || status == "DONE")) {
-    router.push(`/registry-temp/edit/${id}`);
-  }
-};
-
-// ยืนยันการลบรายการข้อมูลในตาราง
-const clickDelete = (id: string) => {
-  dialogRemove($q, async () => await deleteData(id));
-};
-
-// ลบรายการข้อมูลในตาราง
-const deleteData = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileInforId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      showEmployeeTemp();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
-const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
-const filters = ref<FormRegistryEmployee[]>([]);
-const filterKeyword2 = ref<any>("");
-const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
-const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
-
-// visible คอลัมน์ในส่วนกำหนดตำแหน่ง
-const visibleColumnsPosition = ref<String[]>([
-  "organizationOrganizationName",
-  "organizationAgencyName",
-  "organizationGovernmentAgencyName",
-  "organizationShortNameName",
-  "organizationTypeName",
-  "organizationLevelName",
-  "positionEmployeeLineName",
-  "positionEmployeePositionName",
-  "posNo",
-]);
-
-// คอลัมน์ในส่วนกำหนดตำแหน่ง
-const columnsPosition = ref<QTableProps["columns"]>([
-  {
-    name: "organizationOrganizationName",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organizationOrganizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationAgencyName",
-    align: "left",
-    label: "รหัสหน่วยงาน",
-    sortable: true,
-    field: "organizationAgencyName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationGovernmentAgencyName",
-    align: "left",
-    label: "รหัสส่วนราชการ",
-    sortable: true,
-    field: "organizationGovernmentAgencyName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationShortNameName",
-    align: "left",
-    label: "ชื่อย่อหน่วยงาน",
-    sortable: true,
-    field: "organizationShortNameName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationTypeName",
-    align: "left",
-    label: "ประเภทหน่วยงาน",
-    sortable: true,
-    field: "organizationTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationLevelName",
-    align: "left",
-    label: "ระดับหน่วยงาน",
-    sortable: true,
-    field: "organizationLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeeLineName",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionEmployeeLineName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeePositionName",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "positionEmployeePositionName",
-    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" }),
-  },
-]);
-
-// ยืนยันการกำหนดตำแหน่ง
-const checkSave = () => {
-  dialogConfirm($q, async () => await saveData());
-};
-
-// เช็คข้อมูลก่อนบันทึกการกำหนดตำแหน่ง
-const saveData = async () => {
-  if (selectedPosition.value.length == 0) {
-    dialogMessageNotify($q, "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง");
-    return;
-  } else {
-    await savePosition();
-  }
-};
-
-// บันทึกการกำหนดตำแหน่ง
-const savePosition = async () => {
-  showLoader();
-  const data = {
-    organizationEmployeeId: selectedPosition.value[0].id,
-  };
-  await http
-    .put(config.API.organizationEmployeePositionId(id.value), data)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await nodeTree();
-      modalOpenClose();
-    });
-};
-
-// ปิด dialog กำหนดตำแหน่ง
-const modalOpenClose = () => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    selectedPosition.value = [];
-    rowsPosition.value = [];
-    id.value = "";
-  }
-};
-
-// คลิกกำหนดตำแหน่ง
-const editDetail = async (row: any) => {
-  await getPosition(row.id);
-  id.value = row.id;
-};
-
-// ดึงข้อมูลตำแหน่ง
-const getPosition = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.organizationEmployeePositionId(id))
-    .then((res) => {
-      const { result } = res.data;
-      let data: any[] = [];
-      result.map((r: any) => {
-        data.push({
-          id: checkNull(r.id),
-          agency: checkNull(r.agency),
-          conditionNote: checkNull(r.conditionNote),
-          department: checkNull(r.department),
-          government: checkNull(r.government),
-          isActive: r.isActive,
-          isCondition: r.isCondition,
-          isDirector: r.isDirector,
-          organizationUserNote: checkNull(r.organizationUserNote),
-          qualification: checkNull(r.qualification),
-          pile: checkNull(r.pile),
-          posNo: checkNull(r.posNo),
-          positionCondition: checkNull(r.positionCondition),
-          positionMasterUserNote: checkNull(r.positionMasterUserNote),
-          organizationOrder: checkNull(r.organizationOrder),
-          organizationFaxId: checkNull(r.organizationFaxId),
-          organizationLevelId: checkNull(r.organizationLevelId),
-          organizationOrganizationId: checkNull(r.organizationOrganizationId),
-          organizationTelExternalId: checkNull(r.organizationTelExternalId),
-          organizationTelInternalId: checkNull(r.organizationTelInternalId),
-          organizationTypeId: checkNull(r.organizationTypeId),
-          positionEmployeeStatusId: checkNull(r.positionEmployeeStatusId),
-          positionEmployeeLineId: checkNull(r.positionEmployeeLineId),
-          positionEmployeePositionId: checkNull(r.positionEmployeePositionId),
-          organizationAgencyId: checkNull(r.organizationAgencyId),
-          organizationGovernmentAgencyId: checkNull(
-            r.organizationGovernmentAgencyId
-          ),
-          organizationShortNameId: checkNull(r.organizationShortNameId),
-          organizationFaxName: checkNull(r.organizationFaxName),
-          organizationLevelName: checkNull(r.organizationLevelName),
-          organizationOrganizationName: checkNull(
-            r.organizationOrganizationName
-          ),
-          organizationTelExternalName: checkNull(r.organizationTelExternalName),
-          organizationTelInternalName: checkNull(r.organizationTelInternalName),
-          organizationTypeName: checkNull(r.organizationTypeName),
-          positionEmployeeStatusName: checkNull(r.positionEmployeeStatusName),
-          positionEmployeeLineName: checkNull(r.positionEmployeeLineName),
-          positionEmployeePositionName: checkNull(
-            r.positionEmployeePositionName
-          ),
-          organizationAgencyName: checkNull(r.organizationAgencyName),
-          organizationGovernmentAgencyName: checkNull(
-            r.organizationGovernmentAgencyName
-          ),
-          organizationShortNameName: checkNull(r.organizationShortNameName),
-          positionEmployeeLevels: r.positionEmployeeLevels,
-          positionEmployeePositionSides: r.positionEmployeePositionSides,
-          use: r.use,
-        });
-      });
-
-      const index = data.findIndex((r: any) => r.use == true);
-      if (index >= 0) {
-        selectedPosition.value = [data[index]];
-      }
-
-      rowsPosition.value = data;
-      modal.value = true;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// ดึงข้อมูลตำแหน่ง (root tree)
-const selected = ref([]);
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileOrganizRoot)
-    .then((res: any) => {
-      const data = res.data.result;
-      if (data.length > 0) {
-        selected.value = data[0].id;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await showEmployeeTemp();
-    });
-};
-// **** จบส่วนของการเลือกตำแหน่ง ***//
-
-// ดึงรายการข้อมูลมา mapping แสดงในตาราง
-const rows = ref<FormRegistryEmployee[]>([]);
-const showEmployeeTemp = async () => {
-  showLoader();
-
-  let cirteria = [
-    {
-      criteriaType: "employee_class",
-      criteriaValue: "temp",
-    },
-    {
-      criteriaType: "is_retire",
-      criteriaValue: "false",
-    },
-  ];
-
-  if (selected.value == null) return;
-  await http
-    .post(config.API.searchProfileTemp("all"), {
-      criterias: cirteria,
-    })
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = [];
-      filters.value = [];
-      let list: FormRegistryEmployee[] = [];
-      data.map((e: ResponseEmployeeTemp) => {
-        list.push({
-          id: e.id,
-          fullname: e.fullname,
-          fullnameOld: e.fullnameOld,
-          position: e.position,
-          positionPathSide: e.positionPathSide,
-          positionLine: e.positionLine,
-          govAge: e.govAge,
-          positionEmployeePosition: e.positionEmployeePosition,
-          positionEmployeePositionSide: e.positionEmployeePositionSide,
-          positionEmployeeGroup: e.positionEmployeeGroup,
-          oc: e.oc,
-          age: e.age,
-          amount: e.amount == null ? "" : e.amount.toLocaleString(),
-          refSalary: e.refSalary,
-          dateAppoint:
-            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
-          dateStart:
-            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
-          createdAt:
-            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
-          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
-          leaveDateOrder:
-            e.leaveDateOrder == null
-              ? null
-              : date2Thai(new Date(e.leaveDateOrder)),
-          newAgency: "",
-          currentAgency: "",
-          draftPositionEmployee: e.draftPositionEmployee,
-          draftOrganizationOrganization: e.draftOrganizationOrganization,
-          status: e.draftOrgEmployeeStatus ?? "",
-          statustext: statusText(e.draftOrgEmployeeStatus ?? ""),
-        });
-      });
-      rows.value = list;
-      filters.value = list;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายชื่อลูกจ้างชั่วคราว
-  </div>
-  <q-card flat bordered class="q-pa-md">
-    <div class="col-12 row items-center">
-      <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="mdi-account-arrow-right"
-        @click="clickAddOrder"
-      >
-        <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="items-center" style="display: flex">
-        <!-- ค้นหาข้อความใน table -->
-        <q-input
-          standout
-          dense
-          v-model="filter"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-        <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          v-model="visibleColumnsEmployeeTemp"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
-      </div>
-    </div>
-    <div class="col-12 q-pt-sm">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumnsEmployeeTemp"
-        :filter="filter"
-        row-key="id"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              key="no"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td
-              key="fullname"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.fullname }}
-            </q-td>
-            <q-td
-              key="draftOrganizationOrganization"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              <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"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              <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"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.amount }}
-            </q-td>
-            <q-td
-              key="govAge"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.govAge }}
-            </q-td>
-            <q-td
-              key="dateAppoint"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.dateAppoint }}
-            </q-td>
-            <q-td
-              key="dateStart"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.dateStart }}
-            </q-td>
-            <q-td
-              key="salaryDate"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.salaryDate }}
-            </q-td>
-            <q-td
-              key="refSalary"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.refSalary }}
-            </q-td>
-            <q-td
-              key="age"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.age }}
-            </q-td>
-            <q-td
-              key="fullnameOld"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.fullnameOld }}
-            </q-td>
-            <q-td
-              key="createdAt"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.createdAt }}
-            </q-td>
-            <q-td
-              key="isLeave"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.isLeave }}
-            </q-td>
-
-            <q-td
-              key="leaveDateOrder"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.leaveDateOrder }}
-            </q-td>
-            <q-td
-              key="statustext"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.statustext }}
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                icon="mdi-dots-vertical"
-                size="12px"
-                color="grey-7"
-                flat
-                round
-                dense
-              >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 160px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row)"
-                      :disable="
-                        props.row.status == 'REPORT' ||
-                        props.row.status == 'DONE'
-                      "
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          :color="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                              ? 'grey'
-                              : 'blue'
-                          "
-                          size="xs"
-                          name="mdi-account-settings"
-                        />
-                      </q-item-section>
-                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="clickDelete(props.row.id)"
-                      :disable="
-                        props.row.status == 'REPORT' ||
-                        props.row.status == 'DONE'
-                      "
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          :color="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                              ? 'grey'
-                              : 'red-7'
-                          "
-                          size="xs"
-                          name="mdi-delete"
-                        />
-                      </q-item-section>
-                      <q-item-section>ลบ</q-item-section>
-                    </q-item>
-
-                    <q-separator />
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 70vw; max-width: 70vw">
-      <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
-      <q-separator />
-      <q-card-section class="q-pa-sm">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                ref="filterRef"
-                debounce="300"
-                v-model="filterKeyword2"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumnsPosition"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columnsPosition"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-        <d-table
-          :rows="rowsPosition"
-          :columns="columnsPosition"
-          :filter="filterKeyword2"
-          row-key="id"
-          selection="single"
-          v-model:selected="selectedPosition"
-          :visible-columns="visibleColumnsPosition"
-        >
-          <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-        </d-table>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="checkSave"
-          class="q-px-md"
-        >
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
-  <DialogSendToCommand
-    :modal="modaladdOrder"
-    :closeDialog="clickCloseSendModal"
-    :rows="rows"
-    :fetch-new-list="showEmployeeTemp"
-  />
-</template>