From 0d04f6a3b5218caa58e00e8acca05fafcb312f04 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 5 Jun 2024 10:12:31 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81=20=3D>=20fix=20bu?=
 =?UTF-8?q?g?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/insignia/InsigniaList.vue      | 202 +++++++++---------
 .../components/insignia/InsigniaType.vue      |   3 +
 .../components/personal/01ListPrefix.vue      |  38 ++--
 .../components/personal/DialogForm.vue        |  20 +-
 .../position-employee/01ListPosition.vue      |   3 +
 .../position-employee/02ListType.vue          |   6 +
 .../components/position/01ListPosition.vue    |  79 +++----
 .../components/position/02ListType.vue        |   5 +
 .../components/position/05ListLevelDetail.vue | 196 +++++++++--------
 .../components/position/DialogAddPosition.vue |  77 +++----
 .../interface/request/position/index.ts       |  11 -
 src/modules/01_metadata/views/personal.vue    |  11 +-
 src/modules/01_metadata/views/position.vue    |   5 +-
 13 files changed, 336 insertions(+), 320 deletions(-)

diff --git a/src/modules/01_metadata/components/insignia/InsigniaList.vue b/src/modules/01_metadata/components/insignia/InsigniaList.vue
index d4e8900f..899eb7a0 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaList.vue
@@ -158,6 +158,10 @@ const visibleColumns = ref<string[]>([
 
 function closeDialog() {
   dialog.value = false;
+  name.value = "";
+  isActive.value = false;
+  shortName.value = "";
+  note.value = "";
 }
 
 function validateForm() {
@@ -210,7 +214,7 @@ async function addData() {
       name: name.value,
       isActive: isActive.value,
       shortName: shortName.value,
-      note: note.value == "" ? "-" : note.value,
+      note: note.value == "" || note.value == null ? "" : note.value,
       insigniaTypeId: id.value,
     })
     .then(() => {
@@ -231,7 +235,7 @@ async function editData(idData: string) {
       name: name.value,
       isActive: isActive.value,
       shortName: shortName.value,
-      note: note.value == "" ? "-" : note.value,
+      note: note.value == "" || note.value == null ? "" : note.value,
       insigniaTypeId: id.value,
     })
     .then(() => {
@@ -261,8 +265,6 @@ async function deleteData(idData: string) {
     });
 }
 
-import { defineEmits } from "vue";
-
 const emit = defineEmits(["nameType"]);
 const dialogOrder = ref<boolean>(false);
 </script>
@@ -403,101 +405,105 @@ const dialogOrder = ref<boolean>(false);
         </q-tr>
       </template>
     </d-table>
-
-    <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="min-width: 350px">
-        <form @submit.prevent="validateForm">
-          <q-card-section class="flex justify-between" style="padding: 0">
-            <dialog-header
-              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-              :close="closeDialog"
-            />
-          </q-card-section>
-
-          <q-separator color="grey-4" />
-          <q-card-section class="q-pa-none">
-            <div class="col-12 q-ma-md">
-              <q-input
-                outlined
-                :model-value="insigniaTypeId"
-                label="ลำดับชั้นเครื่องราชฯ"
-                dense
-                lazy-rules
-                borderless
-                hide-bottom-space
-                readonly
-              />
-            </div>
-            <div class="col-12 q-ma-md">
-              <q-input
-                ref="nameRef"
-                outlined
-                v-model="name"
-                label="ชื่อเครื่องราชฯ"
-                dense
-                lazy-rules
-                borderless
-                :rules="[
-                  (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-                ]"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-12 q-ma-md">
-              <q-input
-                ref="shortNameRef"
-                outlined
-                v-model="shortName"
-                label="ชื่อย่อ"
-                dense
-                lazy-rules
-                borderless
-                :rules="[
-                  (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-                ]"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-12 q-ma-md">
-              <q-input
-                outlined
-                v-model="note"
-                label="หมายเหตุ"
-                dense
-                type="textarea"
-                borderless
-                hide-bottom-space
-              />
-            </div>
-            <div
-              class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-            >
-              <div class="row items-center q-my-sm justify-between">
-                <p class="q-ma-none">สถานะการใช้งาน</p>
-                <label class="toggle-control">
-                  <input type="checkbox" dense v-model="isActive" @change="" />
-                  <span class="control"></span>
-                </label>
-              </div>
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn
-              id="onSubmit"
-              type="submit"
-              dense
-              unelevated
-              label="บันทึก"
-              color="public"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-card-actions>
-        </form>
-      </q-card>
-    </q-dialog>
   </div>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <div class="col-12 q-ma-md">
+            <q-input
+              outlined
+              :model-value="insigniaTypeId"
+              label="ลำดับชั้นเครื่องราชฯ"
+              dense
+              lazy-rules
+              borderless
+              hide-bottom-space
+              readonly
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-12 q-ma-md">
+            <q-input
+              ref="nameRef"
+              outlined
+              v-model="name"
+              label="ชื่อเครื่องราชฯ"
+              dense
+              lazy-rules
+              borderless
+              :rules="[
+                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+              ]"
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-12 q-ma-md">
+            <q-input
+              ref="shortNameRef"
+              outlined
+              v-model="shortName"
+              label="ชื่อย่อ"
+              dense
+              lazy-rules
+              borderless
+              :rules="[
+                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+              ]"
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-12 q-ma-md">
+            <q-input
+              outlined
+              v-model="note"
+              label="หมายเหตุ"
+              dense
+              type="textarea"
+              borderless
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" @change="" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/modules/01_metadata/components/insignia/InsigniaType.vue b/src/modules/01_metadata/components/insignia/InsigniaType.vue
index 9db412fe..e8575b37 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaType.vue
@@ -116,6 +116,8 @@ onMounted(async () => {
 
 function closeDialog() {
   dialog.value = false;
+  name.value = "";
+  isActive.value = false;
 }
 
 function onclickDetail(id: string) {
@@ -339,6 +341,7 @@ async function onSubmit() {
                 (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
               ]"
               hide-bottom-space
+              class="inputgreen"
             />
           </div>
           <div
diff --git a/src/modules/01_metadata/components/personal/01ListPrefix.vue b/src/modules/01_metadata/components/personal/01ListPrefix.vue
index 964a5db6..617df14e 100644
--- a/src/modules/01_metadata/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadata/components/personal/01ListPrefix.vue
@@ -1,12 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
 import { useQuasar } from "quasar";
-import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+/** importComponents*/
+import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
+
+const $q = useQuasar();
+const store = usePersonalDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+
+/** Table*/
 const TABLE_COLUMNS = [
   {
     name: "prefix",
@@ -53,11 +66,12 @@ const TABLE_COLUMNS = [
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-const store = usePersonalDataStore();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+]);
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
@@ -65,12 +79,6 @@ const prefix = ref<string>("");
 const editId = ref<string>("");
 const dialogStatus = ref<string>("");
 const personalName = ref<string>("คำนำหน้าชื่อ");
-const visibleColumns = ref<string[]>([
-  "prefix",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
 
 async function fetchData() {
   showLoader();
diff --git a/src/modules/01_metadata/components/personal/DialogForm.vue b/src/modules/01_metadata/components/personal/DialogForm.vue
index b76e2e48..58ede06f 100644
--- a/src/modules/01_metadata/components/personal/DialogForm.vue
+++ b/src/modules/01_metadata/components/personal/DialogForm.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import dialogHeader from "@/components/DialogHeader.vue";
 import { QInput, useQuasar } from "quasar";
 
+/** importComponents*/
+import dialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
-const dataRef = ref<QInput | null>(null);
-const zipCodeRef = ref<QInput | null>(null);
-const educationRankRef = ref<QInput | null>(null);
+/** props*/
 const data = defineModel<string>("data", {
   required: true,
 });
@@ -34,8 +37,13 @@ const props = defineProps({
   },
 });
 
+const dataRef = ref<QInput | null>(null);
+const zipCodeRef = ref<QInput | null>(null);
+const educationRankRef = ref<QInput | null>(null);
+
 function closeDialog() {
   dialog.value = false;
+  data.value = "";
 }
 
 function validateForm() {
@@ -54,7 +62,6 @@ async function onSubmit() {
           ? props.addData()
           : props.editData(editId.value);
         closeDialog();
-        data.value = "";
         educationRank.value = undefined;
       },
       "ยืนยันการบันทึกข้อมูล",
@@ -109,6 +116,7 @@ async function onSubmit() {
               min="1"
               :rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
               hide-bottom-space
+              class="inputgreen"
             />
           </div>
         </q-card-section>
diff --git a/src/modules/01_metadata/components/position-employee/01ListPosition.vue b/src/modules/01_metadata/components/position-employee/01ListPosition.vue
index 1613b784..c20a291e 100644
--- a/src/modules/01_metadata/components/position-employee/01ListPosition.vue
+++ b/src/modules/01_metadata/components/position-employee/01ListPosition.vue
@@ -430,6 +430,7 @@ onMounted(() => {
                 lazy-rules
                 hide-bottom-space
                 :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
               />
             </div>
 
@@ -449,6 +450,7 @@ onMounted(() => {
                 hide-bottom-space
                 :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                 @update:model-value="updatePosTypeName"
+                class="inputgreen"
               />
             </div>
 
@@ -468,6 +470,7 @@ onMounted(() => {
                 lazy-rules
                 hide-bottom-space
                 :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
               />
             </div>
           </div>
diff --git a/src/modules/01_metadata/components/position-employee/02ListType.vue b/src/modules/01_metadata/components/position-employee/02ListType.vue
index 27985d67..8c608fb2 100644
--- a/src/modules/01_metadata/components/position-employee/02ListType.vue
+++ b/src/modules/01_metadata/components/position-employee/02ListType.vue
@@ -317,6 +317,8 @@ onMounted(() => {
               bg-color="white"
               :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
               hide-bottom-space
+              class="inputgreen"
+
             />
           </div>
 
@@ -331,6 +333,8 @@ onMounted(() => {
               lazy-rules
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อกลุ่มงาน'}`]"
+              class="inputgreen"
+
             />
           </div>
 
@@ -348,6 +352,8 @@ onMounted(() => {
               :rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
               hide-bottom-space
               mask="############"
+              class="inputgreen"
+
             />
           </div>
         </q-card-section>
diff --git a/src/modules/01_metadata/components/position/01ListPosition.vue b/src/modules/01_metadata/components/position/01ListPosition.vue
index f588a116..e9be0866 100644
--- a/src/modules/01_metadata/components/position/01ListPosition.vue
+++ b/src/modules/01_metadata/components/position/01ListPosition.vue
@@ -1,53 +1,27 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
 import type {
   DataOption,
   FormPositionSelect,
-  ListMenu,
   RowDetailPositions,
 } from "@/modules/01_metadata/interface/request/position/index";
-import type { QTableProps } from "quasar";
+
 import DialogAddPosition from "@/modules/01_metadata/components/position/DialogAddPosition.vue";
 
-const editPosition = ref<boolean>(false);
-const modalAddPosition = ref<boolean>(false);
-const levelOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const levelOps = ref<DataOption[]>([]);
+import { useCounterMixin } from "@/stores/mixin";
 
-const isSpecial = ref<boolean>(false);
-const formPositionSelect = reactive<FormPositionSelect>({
-  positionId: "",
-  posTypeId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-  isSpecial: false,
-});
+const $q = useQuasar();
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
+/** Table*/
 const rows = ref<RowDetailPositions[]>([]);
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "คัดลอก",
-    icon: "mdi-content-copy",
-    type: "copy",
-    color: "blue-6",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "remove",
-    color: "red",
-  },
-]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -133,17 +107,22 @@ const visibleColumns = ref<string[]>([
   "positionArea",
 ]);
 
-const $q = useQuasar();
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  posTypeId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+  isSpecial: false,
+});
+const editPosition = ref<boolean>(false);
+const copyPosition = ref<boolean>(false);
+
+const modalAddPosition = ref<boolean>(false);
 
 /** input ค้นหา */
 const searchRef = ref<any>(null);
@@ -175,13 +154,13 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
   modalAddPosition.value = true;
+  copyPosition.value = true;
 }
 /**
  * แก้ไขข้อมูล
  * @param data ข้อมูลตำแหน่ง
  */
 function editDetiail(data: RowDetailPositions) {
-  console.log(data);
   formPositionSelect.positionId = data.id;
   formPositionSelect.posTypeId = data.posTypeId;
   formPositionSelect.positionName = data.positionName;
@@ -438,10 +417,14 @@ onMounted(() => {
       </template>
     </d-table>
   </div>
+
+  copyPosition
   <DialogAddPosition
     v-model:add-position="modalAddPosition"
     v-model:form-data="formPositionSelect"
     v-model:edit-check="editPosition"
+    v-model:copy-check="copyPosition"
+
     :get-data="searchInput"
   />
 </template>
diff --git a/src/modules/01_metadata/components/position/02ListType.vue b/src/modules/01_metadata/components/position/02ListType.vue
index 221a2a46..93c6f2f0 100644
--- a/src/modules/01_metadata/components/position/02ListType.vue
+++ b/src/modules/01_metadata/components/position/02ListType.vue
@@ -162,6 +162,8 @@ onMounted(async () => {
 
 function closeDialog() {
   dialog.value = false;
+  posTypeName.value = "";
+  posTypeRank.value = null;
 }
 
 function onclickDetail(id: string) {
@@ -322,6 +324,7 @@ async function onSubmit() {
               borderless
               :rules="[(val) => val.length > 0 || 'กรุณากรอกประเภทตำแหน่ง']"
               hide-bottom-space
+              class="inputgreen"
             />
           </div>
           <div class="col-12 q-ma-md">
@@ -337,6 +340,8 @@ async function onSubmit() {
               :rules="[(val) => val != undefined || 'กรุณากรอกระดับตำแหน่ง']"
               hide-bottom-space
               mask="############"
+              class="inputgreen"
+
             />
           </div>
         </q-card-section>
diff --git a/src/modules/01_metadata/components/position/05ListLevelDetail.vue b/src/modules/01_metadata/components/position/05ListLevelDetail.vue
index 6ccea0c5..1f7837da 100644
--- a/src/modules/01_metadata/components/position/05ListLevelDetail.vue
+++ b/src/modules/01_metadata/components/position/05ListLevelDetail.vue
@@ -375,101 +375,109 @@ onMounted(async () => {
       </template>
     </d-table>
 
-    <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="width: 350px">
-        <form @submit.prevent="validateForm">
-          <q-card-section class="flex justify-between" style="padding: 0">
-            <dialog-header
-              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-              :close="closeDialog"
-            />
-          </q-card-section>
-
-          <q-separator color="grey-4" />
-          <q-card-section class="row q-gutter-y-md">
-            <div class="col-12">
-              <q-input
-                outlined
-                ref="posLevelNameRef"
-                v-model="posLevelName"
-                label="ชื่อระดับตำแหน่ง"
-                dense
-                lazy-rules
-                borderless
-                bg-color="white"
-                hide-bottom-space
-                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
-              />
-            </div>
-
-            <div class="col-12">
-              <q-input
-                ref="posLevelRankRef"
-                outlined
-                v-model="posLevelRank"
-                label="ระดับ"
-                dense
-                lazy-rules
-                borderless
-                min="1"
-                bg-color="white"
-                :rules="[(val) => val > 0 || 'กรุณากรอกระดับ']"
-                hide-bottom-space
-                mask="############"
-              />
-            </div>
-
-            <div class="col-12">
-              <q-select
-                ref="posLevelAuthorityRef"
-                outlined
-                v-model="posLevelAuthority"
-                emit-value
-                map-options
-                :options="storeOption.posLevelAuthorityOption"
-                option-value="id"
-                label="ผู้มีอำนาจสั่งบรรจุ"
-                dense
-                lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
-                borderless
-                bg-color="white"
-                hide-bottom-space
-              />
-            </div>
-
-            <div class="col-12">
-              <q-select
-                ref="posTypeIdRef"
-                v-model="posName"
-                label="ประเภทตำแหน่ง"
-                outlined
-                dense
-                bg-color="white"
-                options-cover
-                hide-bottom-space
-                readonly
-              />
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn
-              id="onSubmit"
-              type="submit"
-              dense
-              unelevated
-              label="บันทึก"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-card-actions>
-        </form>
-      </q-card>
-    </q-dialog>
   </div>
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              outlined
+              ref="posLevelNameRef"
+              v-model="posLevelName"
+              label="ชื่อระดับตำแหน่ง"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
+              class="inputgreen"
+
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posLevelRankRef"
+              outlined
+              v-model="posLevelRank"
+              label="ระดับ"
+              dense
+              lazy-rules
+              borderless
+              min="1"
+              bg-color="white"
+              :rules="[(val) => val > 0 || 'กรุณากรอกระดับ']"
+              hide-bottom-space
+              mask="############"
+              class="inputgreen"
+
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posLevelAuthorityRef"
+              outlined
+              v-model="posLevelAuthority"
+              emit-value
+              map-options
+              :options="storeOption.posLevelAuthorityOption"
+              option-value="id"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              class="inputgreen"
+
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posTypeIdRef"
+              v-model="posName"
+              label="ประเภทตำแหน่ง"
+              outlined
+              dense
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+              class="inputgreen"
+
+            />
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/modules/01_metadata/components/position/DialogAddPosition.vue b/src/modules/01_metadata/components/position/DialogAddPosition.vue
index 22522a79..c31ff092 100644
--- a/src/modules/01_metadata/components/position/DialogAddPosition.vue
+++ b/src/modules/01_metadata/components/position/DialogAddPosition.vue
@@ -3,17 +3,19 @@ import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
+
 import type {
   DataOption,
   FormPositionSelectDialog,
-  FormPositionSelectRef,
   OptionType,
   OptionLevel,
   OptionExecutive,
 } from "@/modules/01_metadata/interface/request/position/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
+
 const executiveOpsMain = ref<DataOption[]>([]);
 const levelOps = ref<DataOption[]>([]);
 const levelOpsMain = ref<DataOption[]>([]);
@@ -43,50 +45,31 @@ const isReadonly = ref<boolean>(false); // อ่านได้อย่าง
 const modal = defineModel<boolean>("addPosition", { required: true });
 const formData = defineModel<any>("formData", { required: true });
 const editCheck = defineModel<boolean>("editCheck", { required: true });
-
-const positionNameRef = ref<Object | null>(null);
-const positionFieldRef = ref<Object | null>(null);
-const positionTypeRef = ref<Object | null>(null);
-const positionLevelRef = ref<Object | null>(null);
-const positionExecutiveRef = ref<Object | null>(null);
-const positionExecutiveFieldRef = ref<Object | null>(null);
-const positionAreaRef = ref<Object | null>(null);
-
-const objectPositionSelectRef: FormPositionSelectRef = {
-  positionName: positionNameRef,
-  positionField: positionFieldRef,
-  positionType: positionTypeRef,
-  positionLevel: positionLevelRef,
-  positionExecutive: positionExecutiveRef,
-  positionExecutiveField: positionExecutiveFieldRef,
-  positionArea: positionAreaRef,
-};
+const copyCheck = defineModel<boolean>("copyCheck", { required: true });
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateFormPositionEdit() {
-  const hasError = [];
-  for (const key in objectPositionSelectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-      const property = objectPositionSelectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (editCheck.value == true) {
-      saveSelectEdit();
-    } else {
-      onSubmitSelectEdit();
-    }
+  // const hasError = [];
+  // for (const key in objectPositionSelectRef) {
+  //   if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+  //     const property = objectPositionSelectRef[key];
+  //     if (property.value && typeof property.value.validate === "function") {
+  //       const isValid = property.value.validate();
+  //       hasError.push(isValid);
+  //     }
+  //   }
+  // }
+  // if (hasError.every((result) => result === true)) {
+  if (editCheck.value == true) {
+    saveSelectEdit();
+  } else {
+    onSubmitSelectEdit();
   }
+  // }
 }
 
 /** ฟังชั่น บันทึก */
 function saveSelectEdit() {
-  console.log(formPositionSelect.positionExecutive);
-  console.log(formPositionSelect.positionArea);
   dialogConfirm(
     $q,
     async () => {
@@ -197,7 +180,9 @@ async function fetchType() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
     });
 }
 
@@ -217,7 +202,9 @@ async function fetchExecutive() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
     });
 }
 
@@ -227,7 +214,7 @@ watch(
     if (modal.value == true) {
       fetchType();
       fetchExecutive();
-      if (formData.value) {
+      if (editCheck.value || copyCheck.value) {
         const dataList = formData.value;
         setTimeout(() => {
           updateSelectType(dataList.posTypeId);
@@ -259,13 +246,15 @@ function updateSelectType(val: string) {
 function close() {
   modal.value = false;
   editCheck.value = false;
+  copyCheck.value = false;
+  clearFormPositionSelect();
 }
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 50vw">
-      <form @submit.prevent="validateFormPositionEdit">
+      <q-form greedy @submit.prevent="validateFormPositionEdit">
         <DialogHeader
           :tittle="`${editCheck ? 'แก้ไขข้อมูลตำแหน่ง' : 'เพิ่มข้อมูลตำแหน่ง'}`"
           :close="close"
@@ -398,7 +387,7 @@ function close() {
         <q-card-actions align="right" class="bg-white text-teal">
           <q-btn type="submit" :label="`บันทึก`" color="public" />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/01_metadata/interface/request/position/index.ts b/src/modules/01_metadata/interface/request/position/index.ts
index 098952d8..982152f1 100644
--- a/src/modules/01_metadata/interface/request/position/index.ts
+++ b/src/modules/01_metadata/interface/request/position/index.ts
@@ -25,16 +25,6 @@ interface FormPositionEmployeeSelectDialog {
   positionLevel: string;
 }
 
-interface FormPositionSelectRef {
-  positionName: object | null;
-  positionField: object | null;
-  positionType: object | null;
-  positionLevel: object | null;
-  positionExecutive: object | null;
-  positionExecutiveField: object | null;
-  positionArea: object | null;
-  [key: string]: any;
-}
 interface FormPositionEmployeeSelectRef {
   positionName: object | null;
   positionType: object | null;
@@ -108,7 +98,6 @@ export type {
   Pagination,
   DataOption,
   FormPositionSelect,
-  FormPositionSelectRef,
   OptionType,
   OptionLevel,
   OptionExecutive,
diff --git a/src/modules/01_metadata/views/personal.vue b/src/modules/01_metadata/views/personal.vue
index 4f0a39e7..1b4cbf4c 100644
--- a/src/modules/01_metadata/views/personal.vue
+++ b/src/modules/01_metadata/views/personal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
+
+/** importCompopnents*/
 import ListPrefix from "@/modules/01_metadata/components/personal/01ListPrefix.vue";
 import ListRank from "@/modules/01_metadata/components/personal/02ListRank.vue";
 import ListBloodGroup from "@/modules/01_metadata/components/personal/03ListBloodGroup.vue";
@@ -10,9 +11,15 @@ import ListRelationship from "@/modules/01_metadata/components/personal/06ListRe
 import ListEducation from "@/modules/01_metadata/components/personal/07ListEducationLevel.vue";
 import ListProvince from "@/modules/01_metadata/components/personal/08ListProvince.vue";
 
+/** importStores*/
+import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
+
+/** use*/
 const store = usePersonalDataStore();
+
 const tabs = ref<Array<any>>([]);
 
+/** HOOK*/
 onMounted(() => {
   const tabsPerson = [
     { label: "คำนำหน้าชื่อ", value: "list_prefix" },
@@ -54,8 +61,8 @@ onMounted(() => {
         />
       </q-tabs>
       <q-separator />
-      <!-- person -->
 
+      <!-- person -->
       <q-tab-panels v-model="store.currentTab" animated>
         <q-tab-panel name="list_prefix">
           <ListPrefix v-if="store.currentTab == 'list_prefix'" />
diff --git a/src/modules/01_metadata/views/position.vue b/src/modules/01_metadata/views/position.vue
index e0854e0e..055108a1 100644
--- a/src/modules/01_metadata/views/position.vue
+++ b/src/modules/01_metadata/views/position.vue
@@ -1,11 +1,12 @@
-div
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+
 import ListPosition from "@/modules/01_metadata/components/position/01ListPosition.vue";
 import ListType from "@/modules/01_metadata/components/position/02ListType.vue";
 import ListExecutive from "@/modules/01_metadata/components/position/04ListExecutive.vue";
+
 import { usePositionDataStore } from "../stores/positionListStore";
-// const store.pathLocation = ref<string>("list_position");
+
 const tabs = ref<Array<any>>([]);
 const store = usePositionDataStore();