From cd1a733ef6b740cd03484e4e98d46576acac4ce6 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 19 Oct 2023 13:47:54 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20currency=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CurruncyInput.vue              |   5 +-
 .../components/CurruncyInput.vue              |  60 +++
 .../03_recruiting/components/Occupation.vue   | 412 +++++++-----------
 .../03_recruiting/interface/index/Main.ts     |   4 +-
 4 files changed, 235 insertions(+), 246 deletions(-)
 create mode 100644 src/modules/03_recruiting/components/CurruncyInput.vue

diff --git a/src/components/CurruncyInput.vue b/src/components/CurruncyInput.vue
index 89d371935..9386d093e 100644
--- a/src/components/CurruncyInput.vue
+++ b/src/components/CurruncyInput.vue
@@ -26,7 +26,10 @@ import { ref, useSlots, watch } from "vue";
 const slots = ref<any>(useSlots());
 
 const props = defineProps({
-  modelValue: Number,
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
   dense: {
     type: Boolean,
     default: true,
diff --git a/src/modules/03_recruiting/components/CurruncyInput.vue b/src/modules/03_recruiting/components/CurruncyInput.vue
new file mode 100644
index 000000000..9386d093e
--- /dev/null
+++ b/src/modules/03_recruiting/components/CurruncyInput.vue
@@ -0,0 +1,60 @@
+<template>
+  <q-input
+    ref="inputRef"
+    v-model="formattedValue"
+    :dense="dense"
+    :outlined="edit"
+    :class="
+      edit == true
+        ? 'full-width inputgreen cursor-pointer'
+        : 'full-width cursor-pointer'
+    "
+    :readonly="!edit"
+    :borderless="!edit"
+    hide-bottom-space
+  >
+    <template v-for="slot in slots">
+      <slot :name="slot" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyInput } from "vue-currency-input";
+import { ref, useSlots, watch } from "vue";
+
+const slots = ref<any>(useSlots());
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
+  dense: {
+    type: Boolean,
+    default: true,
+  },
+  edit: {
+    type: Boolean,
+  },
+});
+
+const { inputRef, formattedValue, setValue } = useCurrencyInput({
+  locale: "th-TH",
+  currency: "THB",
+  currencyDisplay: "hidden" as any,
+  hideCurrencySymbolOnFocus: true,
+  hideGroupingSeparatorOnFocus: true,
+  hideNegligibleDecimalDigitsOnFocus: true,
+  autoDecimalDigits: false,
+  useGrouping: true,
+  accountingSign: false,
+});
+
+watch(
+  () => props.modelValue,
+  (value: any) => {
+    setValue(value);
+  }
+);
+</script>
diff --git a/src/modules/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index 9fc2ebc51..7ab6eb574 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -1,212 +1,138 @@
 <!-- card ตำแหน่งปัจจุบัน -->
 <template>
-	<HeaderTop
-		v-model:edit="edit"
-		header="ตำแหน่งปัจจุบัน"
-		icon="mdi-briefcase"
-		:addData="true"
-		:editOnly="false"
-		:editData="false"
-	/>
-	<q-form ref="myform">
-		<div class="row col-12 items-center">
-			<div class="col-12 q-pb-sm">
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ลูกจ้างประจำ"
-					color="teal"
-					val="prem"
-					:disable="
-						!(status == 'checkRegister' || status == 'payment')
-					"
-				/>
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ลูกจ้างชั่วคราว"
-					color="teal"
-					val="temp"
-					:disable="
-						!(status == 'checkRegister' || status == 'payment')
-					"
-				/>
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-					color="teal"
-					val="other"
-					:disable="
-						!(status == 'checkRegister' || status == 'payment')
-					"
-				/>
-			</div>
-			<div class="col-12 row q-col-gutter-sm">
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.position"
-						:rules="[
-							(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`,
-						]"
-						:label="`${'ชื่อตำแหน่ง'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						type="number"
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.salary"
-						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-						:label="`${'เงินเดือน'}`"
-					/>
-				</div>
+  <HeaderTop
+    v-model:edit="edit"
+    header="ตำแหน่งปัจจุบัน"
+    icon="mdi-briefcase"
+    :addData="true"
+    :editOnly="false"
+    :editData="false"
+  />
+  <q-form ref="myform">
+    <div class="row col-12 items-center">
+      <div class="col-12 q-pb-sm">
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ลูกจ้างประจำ"
+          color="teal"
+          val="prem"
+          :disable="!(status == 'checkRegister' || status == 'payment')"
+        />
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ลูกจ้างชั่วคราว"
+          color="teal"
+          val="temp"
+          :disable="!(status == 'checkRegister' || status == 'payment')"
+        />
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+          color="teal"
+          val="other"
+          :disable="!(status == 'checkRegister' || status == 'payment')"
+        />
+      </div>
+      <div class="col-12 row q-col-gutter-sm">
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.position"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
+            :label="`${'ชื่อตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-4">
+          <CurrencyInput
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            :options="{
+              currency: 'THB',
+            }"
+            v-model="defaultOccupation.salary"
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+            :label="`${'เงินเดือน'}`"
+          />
+        </div>
 
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.group"
-						:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-						:label="`${'กลุ่ม/ฝ่าย'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.pile"
-						:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-						:label="`${'กอง'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.org"
-						:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-						:label="`${'สังกัด'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						:counter="
-							status == 'checkRegister' || status == 'payment'
-								? true
-								: false
-						"
-						maxlength="10"
-						lazy-rules
-						type="tel"
-						mask="##########"
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.tel"
-						:rules="[
-							(val) =>
-								!!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-							(val) =>
-								(val.length >= 9 &&
-									val.length <= 10 &&
-									val.startsWith('0')) ||
-								'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
-						]"
-						:label="`${'เบอร์โทรที่ทำงาน'}`"
-					/>
-				</div>
-			</div>
-		</div>
-	</q-form>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.group"
+            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+            :label="`${'กลุ่ม/ฝ่าย'}`"
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.pile"
+            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+            :label="`${'กอง'}`"
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.org"
+            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            :counter="
+              status == 'checkRegister' || status == 'payment' ? true : false
+            "
+            maxlength="10"
+            lazy-rules
+            type="tel"
+            mask="##########"
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.tel"
+            :rules="[
+              (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+              (val) =>
+                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
+            ]"
+            :label="`${'เบอร์โทรที่ทำงาน'}`"
+          />
+        </div>
+      </div>
+    </div>
+  </q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
@@ -214,24 +140,24 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
 import {
-	defaultOccupation,
-	changeData,
+  defaultOccupation,
+  changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
-
+import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const props = defineProps({
-	status: {
-		type: String,
-		required: true,
-	},
-	form: {
-		type: Object,
-		required: true,
-	},
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
 });
 
 const $q = useQuasar();
@@ -246,43 +172,43 @@ const { messageError, showLoader, hideLoader } = mixin;
 const emit = defineEmits(["update:form"]);
 
 watch(myform, async (count: any, prevCount: any) => {
-	emit("update:form", count);
+  emit("update:form", count);
 });
 
 watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
-	await changeData("occupation", count);
+  await changeData("occupation", count);
 });
 
 onMounted(async () => {
-	await fetchData();
+  await fetchData();
 });
 
 const fetchData = async () => {
-	showLoader();
-	await http
-		.get(config.API.candidateOccupation(candidateId.value))
-		.then((res) => {
-			const data = res.data.result;
-			defaultOccupation.value.org = data.occupationOrg;
-			defaultOccupation.value.pile = data.occupationPile;
-			defaultOccupation.value.group = data.occupationGroup;
-			defaultOccupation.value.salary = data.occupationSalary;
-			defaultOccupation.value.position = data.occupationPosition;
-			defaultOccupation.value.positionType = data.occupationPositionType;
-			defaultOccupation.value.tel = data.occupationTelephone;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			hideLoader();
-		});
+  showLoader();
+  await http
+    .get(config.API.candidateOccupation(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      defaultOccupation.value.org = data.occupationOrg;
+      defaultOccupation.value.pile = data.occupationPile;
+      defaultOccupation.value.group = data.occupationGroup;
+      defaultOccupation.value.salary = data.occupationSalary;
+      defaultOccupation.value.position = data.occupationPosition;
+      defaultOccupation.value.positionType = data.occupationPositionType;
+      defaultOccupation.value.tel = data.occupationTelephone;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const getClass = (val: boolean) => {
-	return {
-		"full-width inputgreen cursor-pointer": val,
-		"full-width cursor-pointer": !val,
-	};
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
 };
 </script>
diff --git a/src/modules/03_recruiting/interface/index/Main.ts b/src/modules/03_recruiting/interface/index/Main.ts
index 2a92a069d..e7455baef 100644
--- a/src/modules/03_recruiting/interface/index/Main.ts
+++ b/src/modules/03_recruiting/interface/index/Main.ts
@@ -65,7 +65,7 @@ interface Occupation {
   org: string | null;
   pile: string | null;
   group: string | null;
-  salary: string | null;
+  salary: number | undefined;
   position: string | null;
   positionType: string | null;
   tel: string | null;
@@ -229,7 +229,7 @@ const defaultOccupation = ref<Occupation>({
   org: null,
   pile: null,
   group: null,
-  salary: null,
+  salary: undefined,
   position: null,
   positionType: null,
   tel: null,

From 89c381afcc50615b743fb12f56f12e9d17c43821 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 19 Oct 2023 14:36:12 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20id=20=E0=B9=83=E0=B8=AB=E0=B9=89=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=97=E0=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AddEmployee/Main.vue           |  30 +--
 .../2_InvestigateFacts/MainPage.vue           | 172 ++++--------------
 .../11_discipline/interface/index/Main.ts     |   6 +-
 .../store/InvestigateFactStore.ts             |  84 ++++++++-
 4 files changed, 132 insertions(+), 160 deletions(-)

diff --git a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
index 35098cfc7..162446638 100644
--- a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
+++ b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
@@ -359,7 +359,7 @@ const clickBack = () => {
       <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"
+            <q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID " for="#cardId"
               lazy-rules :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
                 (val: string) =>
@@ -369,23 +369,23 @@ const clickBack = () => {
             <!-- :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
+            <selector for="#prefixId" hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
               lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
               :options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
               @filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
+            <q-input for="#firstname" hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
               :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
+            <q-input for="#lastname" hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
               :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
           </div>
         </div>
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+            <datepicker  v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
               :max-date="calculateMaxDate()" @update:model-value="calRetire">
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -394,7 +394,7 @@ const clickBack = () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
+                <q-input for="#birthDate" hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
                   ? null
                   : date2Thai(informaData.birthDate)
                   " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
@@ -412,45 +412,45 @@ const clickBack = () => {
               :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
+            <selector for="#genderId" hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
               option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
                 )" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
+            <selector for="#statusId" hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
               option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
                 )" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
+            <q-input for="#nationality" hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
               :label="`${'สัญชาติ'}`" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
+            <q-input for="#ethnicity" hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
               :label="`${'เชื้อชาติ'}`" />
           </div>
         </div>
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
+            <selector for="#religionId" hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
               option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
                 )" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
+            <selector for="#bloodId" hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
               option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
                 )" clearable />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
+            <q-input for="#tel" hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
               :label="`${'เบอร์โทร'}`" :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
                 (val: string) =>
@@ -464,7 +464,7 @@ const clickBack = () => {
     <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" />
+      <q-btn for="#submitForm" unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
     </div>
   </q-card>
 
@@ -482,7 +482,7 @@ const clickBack = () => {
             <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
           </q-icon>
 
-          <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
+          <input for="#profile" type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
         </div>
       </q-avatar>
 
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index cb8e5d0e0..8635c2d3c 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+
 import router from "@/router";
 import { useQuasar } from "quasar";
 // import { useCounterMixin } from "@/stores/mixin";
@@ -8,10 +8,9 @@ import { useQuasar } from "quasar";
 // import config from "@/app.config";
 // import http from "@/plugins/http";
 
-import { useInvestigateFactStore }  from '../../store/InvestigateFactStore'
-const dataInvestigate = useInvestigateFactStore()
-const { fecthList } = dataInvestigate
-
+import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+const dataInvestigate = useInvestigateFactStore();
+const { fecthList } = dataInvestigate;
 // const mixin = useCounterMixin();
 // const {
 //   date2Thai,
@@ -24,69 +23,6 @@ const { fecthList } = dataInvestigate
 // } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "subject",
-  "interrogated",
-  "fault",
-  "status",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "center",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "subject",
-    align: "left",
-    label: "เรื่อง",
-    sortable: true,
-    field: "subject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "interrogated",
-    align: "left",
-    label: "ผู้ถูกสอบสวน",
-    sortable: true,
-    field: "interrogated",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fault",
-    align: "left",
-    label: "ลักษณะความผิด",
-    sortable: true,
-    field: "fault",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: false,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
@@ -97,7 +33,6 @@ const resetFilter = () => {
   }
 };
 
-
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -111,45 +46,41 @@ const paginationLabel = (start: string, end: string, total: string) => {
   else return start + "-" + end + " ใน " + total;
 };
 
-function fecthInvestigateFact() {
-  const data = [
+const clickAdd = () => {
+  router.push(`/discipline/investigatefacts/add`);
+};
+onMounted(() => {
+  fecthList([
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
       fault: "1",
       status: "0",
-      active:'1'
+      active: "1",
     },
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "นายนครชัย วันดี",
       fault: "1",
       status: "1",
-      active:'1'
+      active: "1",
     },
     {
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
       fault: "0",
       status: "1",
-      active:'1'
+      active: "1",
     },
     {
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
       fault: "0",
       status: "1",
-      active:'1'
+      active: "1",
     },
-  ];
-  fecthList(data); // ส่งข้อมูลไป stores
-}
-const clickAdd = () => {
-  router.push(`/discipline/investigatefacts/add`)
-}
-onMounted(()=>{
-  fecthInvestigateFact()
-})
+  ]);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -194,7 +125,7 @@ onMounted(()=>{
         </q-input>
 
         <q-select
-          v-model="visibleColumns"
+          v-model="dataInvestigate.visibleColumns"
           multiple
           outlined
           dense
@@ -202,7 +133,7 @@ onMounted(()=>{
           :display-value="$q.lang.table.columns"
           emit-value
           map-options
-          :options="columns"
+          :options="dataInvestigate.columns"
           option-value="name"
           options-cover
           style="min-width: 150px"
@@ -212,7 +143,7 @@ onMounted(()=>{
       <div class="col-12">
         <d-table
           ref="table"
-          :columns="columns"
+          :columns="dataInvestigate.columns"
           :rows="dataInvestigate.rows"
           :filter="filterKeyword"
           row-key="interrogated"
@@ -222,13 +153,18 @@ onMounted(()=>{
           dense
           class="custom-header-table"
           v-bind="attrs"
-          :visible-columns="visibleColumns"
+          :visible-columns="dataInvestigate.visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props" style="padding: 10px;color:#35373C;font-weight: 500;">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="padding: 10px; color: #35373c; font-weight: 500"
+              >
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th auto-width />
@@ -237,57 +173,29 @@ onMounted(()=>{
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <q-td v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <div>
+                  {{ col.value }}
+                </div>
               </q-td>
-              <q-td
-                key="subject"
-                :props="props"
-              >
-              {{ props.row.subject }}
-              </q-td>
-              <q-td
-                key="interrogated"
-                :props="props"
-              >
-                {{ props.row.interrogated }}
-              </q-td>
-              <q-td
-                key="fault"
-                :props="props"
-              >
-                {{ props.row.fault }}
-              </q-td>
-              <q-td
-                key="status"
-                :props="props"
-              >
-                {{ props.row.status }}
-              </q-td>
-              <q-td style="font-size: 14px;width: 10rem">
+              <q-td auto-width style="font-size: 14px; width: 10rem">
                 {{ props.row.active }}
               </q-td>
-              <q-td auto-width >
-                <q-btn v-if="props.row.status === 'ยุติเรื่อง'" class="q-px-xl q-py-xs text-white no-shadow" style="background-color:#00AA86 ; border-radius: 6px;">ยกเลิกยุติเรื่อง</q-btn>
+              <q-td auto-width>
+                <q-btn
+                  v-if="props.row.status === 'ยุติเรื่อง'"
+                  class="q-px-xl q-py-xs text-white no-shadow"
+                  style="background-color: #00aa86; border-radius: 6px"
+                  >ยกเลิกยุติเรื่อง</q-btn
+                >
               </q-td>
             </q-tr>
           </template>
-          <!-- <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template> -->
         </d-table>
       </div>
     </div>
   </q-card>
 </template>
-
-
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index d61ea9435..a9c8d518c 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -5,9 +5,9 @@ interface DataOption {
 interface investigatefactsDataRowType {
   subject: string;
   interrogated: string;
-  fault: string;
-  status: string;
-  active: string;
+  fault: string|undefined;
+  status: string|undefined;
+  active: string|undefined;
 }
 interface MyObjectRef {
   orderType: any;
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 99c039f89..9b645d940 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { QTableProps } from "quasar";
 import type { investigatefactsDataRowType, DataOption } from '@/modules/11_discipline/interface/index/Main'
 
 export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact", () => {
@@ -23,6 +24,66 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         { id: "002", name: "ไม่ร้ายเเรง" },
         { id: "003", name: "ร้ายเเรง" },
     ]);
+    const visibleColumns = ref<string[]>([
+        "no",
+        "subject",
+        "interrogated",
+        "fault",
+        "status",
+    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+        {
+            name: "no",
+            align: "center",
+            label: "ลำดับ",
+            sortable: false,
+            field: "no",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+        {
+            name: "subject",
+            align: "left",
+            label: "เรื่อง",
+            sortable: true,
+            field: "subject",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+        {
+            name: "interrogated",
+            align: "left",
+            label: "ผู้ถูกสอบสวน",
+            sortable: true,
+            field: "interrogated",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "fault",
+            align: "left",
+            label: "ลักษณะความผิด",
+            sortable: true,
+            field: "fault",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "status",
+            align: "left",
+            label: "สถานะ",
+            sortable: false,
+            field: "status",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+    ]);
     function filterFnOptionsType(val: string, update: any, type: string) {
         update(() => {
             const needle = val.toLowerCase();
@@ -44,16 +105,17 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
 
         });
     }
-    async function fecthList(data: investigatefactsDataRowType[]) {
-        let datalist: investigatefactsDataRowType[] = data.map((e: any) => ({
-            subject: e.subject,
-            interrogated: e.interrogated,
-            fault: e.fault ?? convertFault(e.fault),
-            status: e.status ?? convertSatatus(e.status),
-            active: e.active ?? activeStatus(e.active)
-
-        }))
-        rows.value = datalist
+    function fecthList(data: investigatefactsDataRowType[]) {
+        let datalist: investigatefactsDataRowType[] = data.map((e: investigatefactsDataRowType) => {
+            return {
+                subject: e.subject,
+                interrogated: e.interrogated,
+                fault: e.fault ? convertFault(e.fault):'-',
+                status: e.status ? convertSatatus(e.status):'-',
+                active: e.active ? activeStatus(e.active):'-'
+            };
+        });
+        rows.value = datalist;
     }
     function convertFault(val: string) {
         switch (val) {
@@ -89,5 +151,7 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         faultOp,
         daysExtendOp,
         investigationOp,
+        visibleColumns,
+        columns
     };
 })
\ No newline at end of file