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

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

src/modules/04_registry/components/Education.vue

@@ -636,7 +636,7 @@ const duration = ref<string>();
 const durationYear = ref<number>(0);
 const other = ref<string>();
 const fundName = ref<string>();
-const isDate = ref<string>("true");
+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());
@@ -1517,7 +1517,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           durationYear: e.durationYear,
           other: e.other,
           fundName: e.fundName,
-          isDate: e.isDate.toString(),
+          isDate: e.isDate,
           finishDate: new Date(e.finishDate),
           startDate: new Date(e.startDate).getFullYear(),
           endDate: new Date(e.endDate).getFullYear(),

src/modules/04_registry/components/Information/Information.vue

@@ -1,106 +1,41 @@
 <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()"
-    />
+    <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) =>
+          <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="#############"
-          />
+            ]" 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'
-                      ) "
-          />
+          <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="`${'ชื่อ'}`"
-          />
+          <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="`${'นามสกุล'}`"
-          />
+          <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"
-          >
+          <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>
@@ -108,30 +43,15 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="
-                  informaData.birthDate !== null
+              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+                :borderless="!edit" :model-value="informaData.birthDate !== null
                     ? date2Thai(informaData.birthDate)
                     : null
-                "
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
+                  " :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 name="event" class="cursor-pointer" :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    ">
                   </q-icon>
                 </template>
               </q-input>
@@ -139,273 +59,99 @@
           </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="`${'อายุ'}`"
-          />
+          <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'
-                      ) "
-          />
+          <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'
-                      ) "
-          />
+          <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="`${'สัญชาติ'}`"
-          />
+          <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="`${'เชื้อชาติ'}`"
-          />
+          <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'
-                      ) "
-          />
+          <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
-          />
+          <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="`${'เบอร์โทร'}`"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) =>
+          <q-input hide-bottom-space :outlined="edit" dense lazy-rules type="tel" :class="getClass(edit)"
+            :readonly="!edit" :borderless="!edit" v-model="informaData.tel" :label="`${'เบอร์โทร'}`" :rules="[
+              (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+              (val: string) =>
                 val.length >= 10 ||
                 `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]"
-            mask="##########"
-          />
+            ]" mask="##########" />
         </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 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 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"
-          />
+          <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"
-          />
+          <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"
-  >
+  <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"
-          >
+          <div v-if="col.name == 'birthDate' || col.name == 'createdAt'" class="table_ellipsis">
             {{ date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
@@ -811,7 +557,7 @@ const fetchPerson = async () => {
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       hideLoader();
     });
@@ -897,14 +643,14 @@ const clickHistory = async () => {
             e.employeeType == "gov"
               ? "งบประมาณเงินอุดหนุนรัฐบาล"
               : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
+                ? "งบประมาณกรุงเทพมหานคร"
+                : "-",
           employeeClass:
             e.employeeClass == "perm"
               ? "ลูกจ้างประจำ"
               : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
+                ? "ลูกจ้างชั่วคราว"
+                : "-",
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -1083,7 +829,7 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,

src/modules/05_placement/components/probation/FormEvaluation/Template1.vue

@@ -4,6 +4,9 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const Header = defineAsyncComponent(
   () =>
     import(
@@ -17,8 +20,6 @@ const FormSaveResult = defineAsyncComponent(
     )
 );
 
-import http from "@/plugins/http";
-import config from "@/app.config";
 const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();

src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue

@@ -4,6 +4,9 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const Header = defineAsyncComponent(
   () =>
     import(
@@ -17,8 +20,6 @@ const FormSaveResultCommader = defineAsyncComponent(
     )
 );
 
-import http from "@/plugins/http";
-import config from "@/app.config";
 const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();

src/modules/05_placement/components/probation/FormEvaluation/Template3.vue

@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import { ref, defineAsyncComponent } from "vue";
-// const tab = ref<string>("save1");
-// const changeTab = (tabVal: string) => {
-//   tab.value = tabVal
-// }
 
-// const Header = defineAsyncComponent(
-//   () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
-// );
 const FormReport = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue")
 )

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

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

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

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

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

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

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

@@ -1,307 +1,3 @@
-<!-- card ผลการประเมินการปฏิบัติราชการ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ผลการประเมินการปฏิบัติราชการ"
-        icon="mdi-clipboard-text"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'name'" class="table_ellipsis">
-                {{ textPoint(props.row.pointSum) }}
-                {{ textRangePoint(props.row.pointSum) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="ผลการประเมินการปฏิบัติราชการ"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่ได้รับ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <!-- <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point"
-                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
-                hide-bottom-space
-                :label="`${'คะแนน'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div> -->
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point1Total"
-                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
-                hide-bottom-space
-                :label="`${'ส่วนที่1 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point1"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point2Total"
-                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
-                hide-bottom-space
-                :label="`${'ส่วนที่2 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="point2"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="pointSumTotal"
-                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
-                hide-bottom-space
-                :label="`${'ผลรวม (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                input-class="text-right"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="pointSum"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ผลประเมินรวม (คะแนน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="text-subtitle2 col-12 row items-center">
-              <q-space></q-space>
-              ผลการประเมิน:
-              <div class="text-bold items-center q-px-sm">
-                {{ textPoint(pointSum) }}
-              </div>
-              {{ textRangePoint(pointSum) }}
-            </div>
-            <!-- <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="name"
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
-                hide-bottom-space
-                :label="`${'ชื่อแบบประเมิน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div> -->
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'name'" class="table_ellipsis">
-            {{ textPoint(props.row.pointSum) }}
-            {{ textRangePoint(props.row.pointSum) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -976,6 +672,312 @@ const textPoint = (val: number | undefined) => {
   else return "-";
 };
 </script>
+
+<!-- card ผลการประเมินการปฏิบัติราชการ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ผลการประเมินการปฏิบัติราชการ"
+        icon="mdi-clipboard-text"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ผลการประเมินการปฏิบัติราชการ"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <!-- <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
+                hide-bottom-space
+                :label="`${'คะแนน'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อแบบประเมิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div> -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;

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

@@ -1,277 +1,3 @@
-<!-- card วินัย -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="วินัย"
-        icon="mdi-scale-balance"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'refCommandDate' || col.name == 'date'"
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? null : date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="วินัย" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
-                    hide-bottom-space
-                    :label="`${'วัน เดือน ปี'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="level"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
-                hide-bottom-space
-                :label="`${'ระดับการลงโทษทางวินัย'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.levelOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="unStigma"
-                hide-bottom-space
-                :label="`${'ล้างมลทิน'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                @update:modelValue="clickEditRow"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    name="mdi-file"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate)
-                    "
-                    hide-bottom-space
-                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'date' ||
-              col.name == 'refCommandDate' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? null : date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -938,6 +664,282 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card วินัย -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วินัย"
+        icon="mdi-scale-balance"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'refCommandDate' || col.name == 'date'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="วินัย" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="level"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'refCommandDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;

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

@@ -1,142 +1,3 @@
-<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>
 <script setup lang="ts">
 import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
@@ -298,3 +159,143 @@ const changeBtn = async () => {
   }
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <q-form ref="myform" class="col-12">
+      <HeaderTop
+        v-model:edit="edit"
+        header="เอกสารหลักฐาน"
+        icon="mdi-file-document"
+        :history="false"
+        :changeBtn="changeBtn"
+        :cancel="onCancel"
+        :disable="statusEdit"
+        :save="uploadData"
+      />
+      <div class="row col-12 q-pt-sm">
+        <q-card bordered flat class="full-width">
+          <q-list separator>
+            <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+              <q-item-section>
+                <q-item-label class="full-width ellipsis">
+                  {{ file.fileName }}
+                </q-item-label>
+
+                <q-item-label caption> </q-item-label>
+              </q-item-section>
+              <q-item-section top side>
+                <div class="row col-12">
+                  <q-btn
+                    class="gt-xs"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadData(file.file)"
+                  />
+                  <q-btn
+                    class="gt-xs"
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    color="red"
+                    icon="mdi-delete-outline"
+                    v-show="edit"
+                    @click="deleteData(file.id)"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-input
+          v-if="edit"
+          class="q-mt-sm col-12 q-pb-xs"
+          outlined
+          dense
+          lazy-rules
+          v-model="name"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+          :label="`${'ชื่อเอกสาร'}`"
+        />
+        <q-uploader
+          v-if="edit"
+          color="gray"
+          type="file"
+          flat
+          @factory="uploadData"
+          ref="uploader"
+          class="full-width"
+          text-color="white"
+          :max-size="10000000"
+          accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+          bordered
+          label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+          @added="fileAdd"
+        >
+          <template v-slot:header="scope">
+            <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+              <q-btn
+                v-if="scope.queuedFiles.length > 0"
+                icon="clear_all"
+                @click="scope.removeQueuedFiles"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ลบทั้งหมด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="scope.uploadedFiles.length > 0"
+                icon="done_all"
+                @click="scope.removeUploadedFiles"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+              </q-btn>
+              <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+              <div class="col">
+                <div class="q-uploader__title">
+                  {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                </div>
+                <div class="q-uploader__subtitle">
+                  {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+                </div>
+              </div>
+              <q-btn
+                v-if="scope.canAddFiles"
+                type="a"
+                icon="add_box"
+                @click="scope.pickFiles"
+                round
+                dense
+                flat
+              >
+                <q-uploader-add-trigger />
+                <q-tooltip>เลือกไฟล์</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="scope.isUploading"
+                icon="clear"
+                @click="scope.abort"
+                round
+                dense
+                flat
+              >
+                <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+              </q-btn>
+            </div>
+          </template>
+        </q-uploader>
+      </div>
+    </q-form>
+  </q-card>
+</template>

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

@@ -1,291 +1,3 @@
-<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>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -643,7 +355,6 @@ const fetchData = async () => {
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
         const data: ResponseObject = res.data.result;
-        console.log(data);
 
         addressData.value.address = data.registrationAddress;
         addressData.value.addressC = data.currentAddress;
@@ -907,3 +618,292 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่"
+      icon="mdi-map-marker"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.address"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codep"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-lg"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-bold"
+            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+          >
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="ใช่"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่"
+            dense
+            :disable="!edit"
+          />
+        </div>
+
+        <div class="col-xs-12" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.addressC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+            :label="`${'ที่อยู่ปัจจุบัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtCOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictCOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codec"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

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

@@ -1,260 +1,3 @@
-<!-- card ใบอนุญาตประกอบอาชีพ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        :name="
-          profileType == 'employee'
-            ? 'ใบอนุญาตของลูกจ้าง'
-            : 'ใบอนุญาตประกอบอาชีพ'
-        "
-        icon="mdi-book"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'issueDate' || col.name == 'expireDate'"
-                class="table_ellipsis"
-              >
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :tittle="
-            profileType == 'employee'
-              ? 'ใบอนุญาตของลูกจ้าง'
-              : 'ใบอนุญาตประกอบอาชีพ'
-          "
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="certificateType"
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
-                hide-bottom-space
-                :label="`${'ชื่อใบอนุญาต'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="issuer"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="certificateNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่ใบอนุญาต'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="issueDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(issueDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่ออกใบอนุญาต'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="expireDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(expireDate)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่หมดอายุ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'expireDate' ||
-              col.name == 'issueDate' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -825,6 +568,265 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card ใบอนุญาตประกอบอาชีพ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee'
+            ? 'ใบอนุญาตของลูกจ้าง'
+            : 'ใบอนุญาตประกอบอาชีพ'
+        "
+        icon="mdi-book"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'expireDate'"
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ใบอนุญาตของลูกจ้าง'
+              : 'ใบอนุญาตประกอบอาชีพ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateType"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่ใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(issueDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่ออกใบอนุญาต'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="expireDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(expireDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่หมดอายุ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'expireDate' ||
+              col.name == 'issueDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;

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

@@ -1,3 +1,439 @@
+<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
@@ -1071,439 +1507,4 @@
       </div>
     </template>
   </DialogHistory>
-</template>
-<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>

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

@@ -1,332 +1,3 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลราชการ"
-      icon="mdi-account-tie"
-      :save="saveData"
-      :history="true"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-      :historyClick="clickHistory"
-    />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.ocId"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.numberId"
-            :label="`${'ตำแหน่งเลขที่'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionId"
-            :label="`${'ตำแหน่ง'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionPathSide"
-            :label="`${'ด้าน/สาขา'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionLine"
-            :label="`${'สายงาน'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionType"
-            :label="`${'ประเภท'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionLevel"
-            :label="`${'ระดับ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionExecutive"
-            :label="`${'ตำแหน่งทางการบริหาร'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.positionExecutiveSide"
-            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
-          />
-        </div>
-        <div class="col-12 q-py-md"><q-separator /></div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <datepicker
-            v-model="govermentData.containDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(new Date(govermentData.containDate))"
-                :rules="[
-                  (val) =>
-                    !!val ||
-                    `${
-                      profileType == 'officer'
-                        ? 'กรุณาเลือกวันที่บรรจุ'
-                        : 'กรุณาเลือกวันที่แต่งตั้ง'
-                    }`,
-                ]"
-                :label="`${
-                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
-                }`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <datepicker
-            v-model="govermentData.workDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(new Date(govermentData.workDate))"
-                :rules="[
-                  (val) =>
-                    !!val ||
-                    `${
-                      profileType == 'officer'
-                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
-                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
-                    }`,
-                ]"
-                :label="`${
-                  profileType == 'officer'
-                    ? 'เริ่มปฎิบัติราชการ'
-                    : 'วันที่จ้างและแต่งตั้งมีผล'
-                }`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            stack-label
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="govermentData.reasonSameDate"
-            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.retireDate"
-            :label="`${'วันเกษียณอายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.ageAll"
-            :label="`${'อายุราชการ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.absent"
-            :label="`${'ขาดราชการ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :model-value="govermentData.age"
-            :label="`${'อายุราชการเกื้อกูล'}`"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'dateStart' ||
-              col.name == 'dateAppoint' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -761,3 +432,333 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลราชการ"
+      icon="mdi-account-tie"
+      :save="saveData"
+      :history="true"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ocId"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionId"
+            :label="`${'ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionPathSide"
+            :label="`${'ด้าน/สาขา'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLine"
+            :label="`${'สายงาน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionType"
+            :label="`${'ประเภท'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLevel"
+            :label="`${'ระดับ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutive"
+            :label="`${'ตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-12 q-py-md"><q-separator /></div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.containDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.containDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกวันที่บรรจุ'
+                        : 'กรุณาเลือกวันที่แต่งตั้ง'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
+                }`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.workDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.workDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
+                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer'
+                    ? 'เริ่มปฎิบัติราชการ'
+                    : 'วันที่จ้างและแต่งตั้งมีผล'
+                }`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            stack-label
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="govermentData.reasonSameDate"
+            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.retireDate"
+            :label="`${'วันเกษียณอายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ageAll"
+            :label="`${'อายุราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.absent"
+            :label="`${'ขาดราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.age"
+            :label="`${'อายุราชการเกื้อกูล'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateAppoint' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

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

@@ -1,417 +1,3 @@
-<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
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
-                :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>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -1073,7 +659,7 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,
@@ -1156,3 +742,418 @@ const getClass = (val: boolean) => {
   };
 };
 </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
+                lazy-rules
+                :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>

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

@@ -1,296 +1,3 @@
-<!-- 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>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -967,6 +674,301 @@ const getClass = (val: boolean) => {
   };
 };
 </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;

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

@@ -1,194 +1,3 @@
-<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>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -198,7 +7,7 @@ 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/views/topEmployeeTemp.vue";
+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";
@@ -211,7 +20,7 @@ const props = defineProps({
   },
   fetchDataProfile: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => { /* function */},
   },
   statusAdd: {
     type: Boolean,
@@ -486,8 +295,6 @@ const fetchData = async () => {
         //   console.log(res);
         // });
         const data: any = res.data.result;
-        console.log(data);
-
         informaTempData.value.employeeMoneyIncrease =
           data.employeeMoneyIncrease;
         informaTempData.value.employeeMoneyAllowance =
@@ -672,3 +479,195 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลลูกจ้างชั่วคราว"
+      icon="mdi-account"
+      :save="saveData"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :addEmployee="statusAdd()"
+      :history="!statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12  q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeeGroupId"
+            :label="`${'กลุ่มงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="employeeGroupOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeeLineId"
+            :label="`${'สายงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionEmployeeLineOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.positionEmployeePositionId"
+            :label="`${'ชื่อตำแหน่งทางสายงาน'}`"
+            @update:modelValue="!edit"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionEmployeePositionOptions"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
+            option-value="id"
+            hide-bottom-space
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.employeeOc"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaTempData.employeeTypeIndividual"
+            :label="`${'ประเภทบุคคล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeWage"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'ค่าจ้าง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyIncrease"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyAllowance"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyEmployee"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <CurrencyInput
+            v-model="informaTempData.employeeMoneyEmployer"
+            :edit="edit"
+            :options="{
+              currency: 'THB',
+            }"
+            :label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

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

@@ -1,346 +1,3 @@
-<!-- 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
-                    lazy-rules
-                    :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>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -724,7 +381,6 @@ const fetchData = async () => {
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
         const data = res.data.result;
-        //   console.log(data);
         data.map((e: ResponseObject) => {
           rows.value.push({
             id: e.id,
@@ -1273,6 +929,351 @@ const getClass = (val: boolean) => {
   };
 };
 </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
+                    lazy-rules
+                    :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;

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

@@ -1,165 +1,3 @@
-<!-- card อื่นๆ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="อื่นๆ"
-        icon="mdi-bookmark"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                autogrow
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -619,3 +457,166 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card อื่นๆ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="อื่นๆ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

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

@@ -1,258 +1,3 @@
-<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
-        icon="mdi-calendar-remove"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'date' || col.name == 'refCommandDate'"
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? null : date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
-                    hide-bottom-space
-                    :label="`${'วัน เดือน ปี'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                autogrow
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                hide-bottom-space
-                :label="`${'เอกสารอ้างอิง'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                autogrow
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="clickEditRow"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    name="mdi-file"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate)
-                    "
-                    hide-bottom-space
-                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'date' ||
-              col.name == 'createdAt' ||
-              col.name == 'refCommandDate'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? null : date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -820,6 +565,263 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+        icon="mdi-calendar-remove"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'date' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;

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

@@ -1,163 +1,3 @@
-<!-- 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>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -684,3 +524,164 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<!-- card ความสามารถพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ความสามารถพิเศษ"
+        icon="mdi-folder-star"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
+                hide-bottom-space
+                :label="`${'ด้าน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="remark"
+                hide-bottom-space
+                :label="`${'หมายเหตุ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>

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

@@ -1,100 +1,3 @@
-<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 />
-    <!-- <q-btn
-      color="info"
-      flat
-      dense
-      round
-      size="14px"
-      icon="mdi-history"
-      v-if="history"
-      @click="historyClick"
-    >
-      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
-    </q-btn> -->
-  </div>
-</template>
 <script setup lang="ts">
 const props = defineProps({
   header: {
@@ -196,4 +99,89 @@ const addleave = () => {
   props.addleave();
 };
 </script>
-<style scoped></style>
+
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+  </div>
+</template>

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

@@ -1,402 +1,3 @@
-<!-- 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
-                    lazy-rules
-                    :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
-                    lazy-rules
-                    :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
-                    lazy-rules
-                    :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>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -1125,6 +726,407 @@ const getClass = (val: boolean) => {
   };
 };
 </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
+                    lazy-rules
+                    :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
+                    lazy-rules
+                    :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
+                    lazy-rules
+                    :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;

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

@@ -1,303 +1,3 @@
-<!-- card ปฏิบัติราชการพิเศษ -->
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ปฏิบัติราชการพิเศษ"
-        icon="mdi-bookmark"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="
-                  col.name == 'dateStart' ||
-                  col.name == 'dateEnd' ||
-                  col.name == 'refCommandDate'
-                "
-                class="table_ellipsis"
-              >
-                {{ col.value == null ? null : date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateStart)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่เริ่มต้น'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateEnd"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateEnd)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                autogrow
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                hide-bottom-space
-                :label="`${'เอกสารอ้างอิง'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                autogrow
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="clickEditRow"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    name="mdi-file"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
-                      refCommandDate == null ? null : date2Thai(refCommandDate)
-                    "
-                    hide-bottom-space
-                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'dateStart' ||
-              col.name == 'dateEnd' ||
-              col.name == 'createdAt' ||
-              col.name == 'refCommandDate'
-            "
-            class="table_ellipsis"
-          >
-            {{ col.value == null ? null : date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -903,6 +603,308 @@ const getClass = (val: boolean) => {
 };
 const resetFilter = () => {};
 </script>
+
+<!-- card ปฏิบัติราชการพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ปฏิบัติราชการพิเศษ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'dateStart' ||
+                  col.name == 'dateEnd' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateStart)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่เริ่มต้น'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateEnd)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่สิ้นสุด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateEnd' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;

src/modules/08_registryEmployee/interface/request/Main.ts

@@ -0,0 +1,56 @@
+interface FormRegistryEmployee {
+  id: string;
+  fullname: string;
+  fullnameOld: string;
+  oc: string;
+  position: string;
+  positionPathSide: string;
+  positionLine: string;
+  govAge: number;
+  refSalary: string;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeeGroup: string | null;
+  age: string;
+  amount: string;
+  dateAppoint: string | null;
+  dateStart: string | null;
+  createdAt: string | null;
+  //   salaryDate: string | null;
+  isLeave: string;
+  //   leaveReason: string;
+  leaveDateOrder: string | null;
+  draftPositionEmployee: string | null;
+  draftOrganizationOrganization: string | null;
+  newAgency: string | null;
+  currentAgency: string | null;
+  status: string;
+  statustext: string;
+}
+interface ResponseEmployeeTemp {
+  id: string;
+  fullname: string;
+  fullnameOld: string;
+  oc: string;
+  position: string;
+  positionPathSide: string;
+  positionLine: string;
+  govAge: number;
+  refSalary: string;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeeGroup: string | null;
+  age: string;
+  amount: string;
+  dateAppoint: Date | null;
+  dateStart: Date | null;
+  createdAt: Date | null;
+  salaryDate: Date | null;
+  isLeave: boolean;
+  leaveReason: string;
+  leaveDateOrder: Date | null;
+  draftPositionEmployee: string | null;
+  draftOrganizationOrganization: string | null;
+  draftOrgEmployeeStatus: string;
+}
+export type { ResponseEmployeeTemp, FormRegistryEmployee };

src/modules/08_registryEmployee/request/Main.ts

@@ -1,56 +0,0 @@
-interface FormRegistryEmployee {
-  id: string;
-  fullname: String;
-  fullnameOld: String;
-  oc: String;
-  position: string;
-  positionPathSide: String;
-  positionLine: String;
-  govAge: number;
-  refSalary: String;
-  positionEmployeePosition: String | null;
-  positionEmployeePositionSide: String | null;
-  positionEmployeeGroup: String | null;
-  age: String;
-  amount: String;
-  dateAppoint: String | null;
-  dateStart: String | null;
-  createdAt: String | null;
-  //   salaryDate: String | null;
-  isLeave: String;
-  //   leaveReason: string;
-  leaveDateOrder: String | null;
-  draftPositionEmployee: String | null;
-  draftOrganizationOrganization: String | null;
-  newAgency: String | null;
-  currentAgency: String | null;
-  status: String;
-  statustext: String;
-}
-interface ResponseEmployeeTemp {
-  id: string;
-  fullname: String;
-  fullnameOld: String;
-  oc: String;
-  position: string;
-  positionPathSide: String;
-  positionLine: String;
-  govAge: number;
-  refSalary: String;
-  positionEmployeePosition: String | null;
-  positionEmployeePositionSide: String | null;
-  positionEmployeeGroup: String | null;
-  age: String;
-  amount: String;
-  dateAppoint: Date | null;
-  dateStart: Date | null;
-  createdAt: Date | null;
-  salaryDate: Date | null;
-  isLeave: boolean;
-  leaveReason: string;
-  leaveDateOrder: Date | null;
-  draftPositionEmployee: String | null;
-  draftOrganizationOrganization: String | null;
-  draftOrgEmployeeStatus: String;
-}
-export type { ResponseEmployeeTemp, FormRegistryEmployee };

src/modules/08_registryEmployee/router.ts

@@ -1,16 +1,14 @@
-/**
- * Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee)
- */
+/*** Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee) */
 import { defineAsyncComponent } from "vue";
 
-// const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
-// const Detail = () => import("@/modules/08_registryEmployee/views/Detail.vue");
 const Main = defineAsyncComponent(
   () => import("@/modules/08_registryEmployee/views/Main.vue")
 );
-const Detail = defineAsyncComponent(
-  () => import("@/modules/08_registryEmployee/views/Detail.vue")
+
+const CreateEmployee = defineAsyncComponent(
+  () => import("@/modules/08_registryEmployee/views/Add.vue")
 );
+
 const EditDetail = defineAsyncComponent(
   () => import("@/modules/08_registryEmployee/views/EditDetail.vue")
 );
@@ -26,20 +24,10 @@ export default [
       Role: "registryEmployee",
     },
   },
-  //   {
-  //     path: "/registryEmployee/:id",
-  //     name: "registryEmployeeDetail",
-  //     component: Detail,
-  //     meta: {
-  //       Auth: true,
-  //       Key: [10],
-  //       Role: "registryEmployeeDetails",
-  //     },
-  //   },
   {
     path: "/registry-employee/add",
     name: "registryEmployeeAdd",
-    component: Detail,
+    component: CreateEmployee,
     meta: {
       Auth: true,
       Key: [11],

src/modules/08_registryEmployee/store.ts

@@ -81,3 +81,29 @@ export const useProfileDataStore = defineStore("profile", () => {
     changeRetireText,
   };
 });
+
+export const useRegistryEmployeeDataStore = defineStore("registryEmployeeDataStore", () => {
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "PENDING":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+  
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
+});

src/modules/08_registryEmployee/views/Add.vue

@@ -1,19 +1,17 @@
+<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">
-        <!-- <Informationvue
-            v-model:statusEdit="statusEdit"
-            :profileType="profileType"
-          /> -->
-        <Information :statusAdd="true" />
+        <AddEmployee />
       </div>
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import Information from "@/modules/08_registryEmployee/views/information.vue";
-</script>
+
 <style>
 .image-size-default {
   height: 150px;

src/modules/08_registryEmployee/views/EditDetail.vue

@@ -1,3 +1,394 @@
+<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 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">
@@ -146,35 +537,6 @@
           </div>
         </div>
         <q-space />
-        <!-- <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
-          <q-tooltip>{{
-            reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
-          }}</q-tooltip>
-        </q-btn> -->
-
-        <!-- <q-btn icon="mdi-file-eye-outline" round color="primary" flat>
-          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-          <q-menu>
-            <q-list style="min-width: 100px">
-              <q-item clickable v-close-popup @click="clickKp7()">
-                <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn> -->
       </div>
     </q-page-sticky>
   </div>
@@ -197,13 +559,6 @@
           style="color: #ff8080; background-color: #ffdede"
         />
       </q-card-section>
-      <q-card-section class="q-p-sm">
-        <!-- <viewpdf
-            :src="pdfSrc"
-            :currentpage="pdfCurrentPage"
-            :totalpage="pdfTotalPage"
-          ></viewpdf> -->
-      </q-card-section>
     </q-card>
   </q-dialog>
   <q-dialog v-model="dialogShort" persistent>
@@ -494,456 +849,7 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import EducationVue from "@/modules/08_registryEmployee/views/Education.vue";
-import TrainVue from "@/modules/08_registryEmployee/views/Train.vue";
-import AssessmentVue from "@/modules/08_registryEmployee/views/Assessment.vue";
-import SalaryVue from "@/modules/08_registryEmployee/views/Salary.vue";
-import SalaryEmployeeVue from "@/modules/08_registryEmployee/views/SalaryEmployee.vue";
-import DisciplineVue from "@/modules/08_registryEmployee/views/Discipline.vue";
-import LeaveVue from "@/modules/08_registryEmployee/views/Leave.vue";
-import TalentVue from "@/modules/08_registryEmployee/views/Talent.vue";
-import WorkVue from "@/modules/08_registryEmployee/views/Work.vue";
-import RecordVue from "@/modules/08_registryEmployee/views/Record.vue";
-import OtherVue from "@/modules/08_registryEmployee/views/Other.vue";
-import DocumentVue from "@/modules/08_registryEmployee/views/Document.vue";
-import Certicate from "@/modules/08_registryEmployee/views/Information/Certicate.vue";
-import Information from "@/modules/08_registryEmployee/views/Information/Information.vue";
-import TempInformation from "@/modules/08_registryEmployee/views/Information/Tempinformation.vue";
-import Address from "@/modules/08_registryEmployee/views/Information/Address.vue";
-import Family from "@/modules/08_registryEmployee/views/Information/Family.vue";
 
-import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const store = useDataStore();
-const { changeTab } = store;
-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 pdfSrc = ref<string>("");
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
-const dialog = ref<boolean>(false);
-const dialogShort = ref<boolean>(false);
-const dialogLeave = ref<boolean>(false);
-const dialogImage = ref<boolean>(false);
-const loader = 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 profileId = ref<string>("");
-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: "change",
-  //     name: "เปลี่ยนประเภทข้าราชการ",
-  //   },
-  {
-    id: "other",
-    name: "อื่นๆ",
-  },
-]);
-
-onMounted(async () => {
-  //   await checkProfileData();
-  //   await fetchData();
-  //   await changeTab("information");
-});
-
-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 checkProfileData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileCheckId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        if (data == false) router.push("/registry");
-      })
-      .catch((e) => {
-        router.push("/registry");
-      })
-      .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();
-      //   dialogImage.value = false;
-    });
-};
-
-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 clickKp7 = async () => {
-  if (profileId.value !== "") {
-    window.open(config.API.profileReportId(profileId.value));
-  }
-  //   showLoader();
-  //   await http
-  //     .get(config.API.profileReportId(profileId.value))
-  //     .then((res) => {
-  //       if (res.data) {
-  //         pdfSrc.value = "data:application/pdf;base64," + res.data;
-  //         pdfCurrentPage.value = 1;
-  //         pdfTotalPage.value = 7;
-  //         dialog.value = true;
-  //       }
-  //     })
-  //     .catch((e) => {messageError($q, e);})
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
-
-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>
 <style>
 .image-size-default {
   height: 150px;

src/modules/08_registryEmployee/views/top.vue

@@ -1,136 +0,0 @@
-<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"></div>
-
-    <q-space />
-    <q-btn
-      color="info"
-      flat
-      dense
-      round
-      size="14px"
-      icon="mdi-history"
-      v-if="history"
-      @click="historyClick"
-    >
-      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
-    </q-btn>
-  </div>
-</template>
-<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>
-<style scoped></style>