From be3ccc205922d50e6a97b575b1b33ffbadfd8300 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 30 Jan 2024 13:26:41 +0700
Subject: [PATCH] pop up

---
 .../components/DialogFormPosition.vue         | 774 ++++++++++++++----
 .../components/StructureDetail.vue            |   4 +-
 .../interface/index/Main.ts                   |  25 +-
 3 files changed, 647 insertions(+), 156 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index 78381a629..dafa9c308 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -8,6 +8,9 @@ import type {
   FormDataPosition,
   FormPositionRef,
   DataOption,
+  FormPositionSelect,
+  RowDetailPositions,
+  ListMenu,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
 const props = defineProps({
@@ -15,23 +18,56 @@ const props = defineProps({
   close: Function,
 });
 
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
+const selected = ref<any>([]);
+const search = ref<string>("");
+const type = ref<string>("positionName");
+const typeOps = ref<DataOption[]>([
+  { id: "positionName", name: "ตำแหน่งในสายงาน" },
+  { id: "positionField", name: "สายงาน" },
+  { id: "positionType", name: "ประเภทตำแหน่ง" },
+  { id: "positionLevel", name: "ระดับตำแหน่ง" },
+  { id: "positionExecutive", name: "ตำแหน่งทางการบริหาร" },
+  { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
+  { id: "positionArea", name: "ด้าน/สาขา" },
+]);
 
-const rows = ref<any[]>([]);
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "orange",
+  },
+]);
+
+const rows = ref<RowDetailPositions[]>([]);
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
 const ocLevelOp = ref<DataOption[]>([]);
 
 const prefixNoRef = ref<Object | null>(null);
 const positionNoRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataPosition>({
+  shortName: "สกจ.",
   prefixNo: "",
   positionNo: "",
   suffixNo: "",
   confirm: false,
 });
 
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+});
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectPositionRef: FormPositionRef = {
   prefixNo: prefixNoRef,
@@ -39,60 +75,89 @@ const objectPositionRef: FormPositionRef = {
 };
 
 const columns = ref<QTableProps["columns"]>([
-    {
-      name: "no",
-      align: "left",
-      label: "ลำดับ",
-      sortable: false,
-      field: "no",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "positionType",
-      align: "left",
-      label: "ประเภทตำเเหน่ง",
-      sortable: true,
-      field: "positionType",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "positionLevel",
-      align: "left",
-      label: "ระดับตำแหน่ง ด้าน/สาขา",
-      sortable: true,
-      field: "positionLevel",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "positionAdmin",
-      align: "left",
-      label: "ตำแหน่งทางการบริหาร",
-      sortable: true,
-      field: "positionAdmin",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "other",
-      align: "left",
-      label: "ฯลฯ",
-      sortable: true,
-      field: "other",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-
-  ]);
-  const visibleColumns = ref<string[]>([
-    "no",
-    "positionType",
-    "positionLevel",
-    "positionAdmin",
-    "other",
-  ]);
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "positionName",
+  "positionField",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveField",
+  "positionArea",
+]);
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateForm() {
@@ -112,27 +177,120 @@ function validateForm() {
   }
 }
 
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  // const hasError = [];
+  // for (const key in objectPositionRef) {
+  //   if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
+  //     const property = objectPositionRef[key];
+  //     if (property.value && typeof property.value.validate === "function") {
+  //       const isValid = property.value.validate();
+  //       hasError.push(isValid);
+  //     }
+  //   }
+  // }
+  // if (hasError.every((result) => result === true)) {
+  onSubmitSelectEdit();
+  // } else {
+  // }
+}
+
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
     console.log(formData);
   });
 }
+/** ฟังชั่น บันทึก */
+function onSubmitSelectEdit() {
+  dialogConfirm($q, () => {
+    console.log(formPositionSelect);
+  });
+}
+
+/** update เมื่อเปลี่ยน option */
+function updateSelect() {
+  search.value = "";
+}
+
+/** input ค้นหา */
+const searchRef = ref<any>(null);
+async function searchInput() {
+  searchRef.value.validate();
+  if (!searchRef.value.hasError) {
+    // จำลอง
+    const dataList = [
+      {
+        positionName: "test1",
+        positionField: "test1",
+        positionType: "test1",
+        positionLevel: "test1",
+        positionExecutive: "test1",
+        positionExecutiveField: "test1",
+        positionArea: "test1",
+      },
+      {
+        positionName: "test2",
+        positionField: "test2",
+        positionType: "test2",
+        positionLevel: "test2",
+        positionExecutive: "test2",
+        positionExecutiveField: "test2",
+        positionArea: "test2",
+      },
+      {
+        positionName: "test3",
+        positionField: "test3",
+        positionType: "test3",
+        positionLevel: "test3",
+        positionExecutive: "test3",
+        positionExecutiveField: "test3",
+        positionArea: "test3",
+      },
+    ];
+    rowsPositionSelect.value = dataList;
+  }
+}
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  formPositionSelect.positionName = data.positionName;
+  formPositionSelect.positionField = data.positionField;
+  formPositionSelect.positionType = data.positionType;
+  formPositionSelect.positionLevel = data.positionLevel;
+  formPositionSelect.positionExecutive = data.positionExecutive;
+  formPositionSelect.positionExecutiveField = data.positionExecutiveField;
+  formPositionSelect.positionArea = data.positionArea;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
 
 watch(
   () => props.modal,
   () => {
     if (props.modal === true) {
-      ocLevelOp.value = [
-        {
-          id: "id1",
-          name: "id1",
-        },
-        {
-          id: "id2",
-          name: "id2",
-        },
-      ];
+    }
+  }
+);
+watch(
+  () => selected.value,
+  () => {
+    if (selected.value.length > 0) {
+      rows.value = selected.value;
+    } else {
+      rows.value = [];
     }
   }
 );
@@ -140,101 +298,411 @@ watch(
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
-      <q-card style="min-width: 50vw">
-        <form @submit.prevent="validateForm">
-          <DialogHeader :tittle="`เพิ่มตำแหน่ง`" :close="props.close" />
-          <q-separator />
+      <q-card style="min-width: 96vw">
+        <DialogHeader :tittle="`เพิ่มตำแหน่ง`" :close="props.close" />
+        <q-separator />
 
-          <q-card-section>
-            <div class="row q-col-gutter-sm">
-              <div class="col-4">
-                <q-input
-                  v-model="formData.prefixNo"
-                  ref="prefixNoRef"
-                  dense
-                  outlined
-                  for="#prefixNo"
-                  label="Prefix เลขที่ตำเเหน่ง"
-                  hide-bottom-space
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกPrefix เลขที่ตำเเหน่ง'}`,
-                  ]"
-                />
-              </div>
-              <div class="col-4">
-                <q-input
-                  v-model="formData.positionNo"
-                  ref="positionNoRef"
-                  dense
-                  outlined
-                  for="#positionNo"
-                  label="เลขที่ตำแหน่ง"
-                  hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
-                />
-              </div>
-              <div class="col-4">
-                <q-input
-                  v-model="formData.suffixNo"
-                  dense
-                  outlined
-                  for="#suffixNo"
-                  label="Suffix เลขที่ตำแหน่ง"
-                />
-              </div>
-              <div class="col-12">
-                <d-table
-                  ref="table"
-                  :columns="columns"
-                  :rows="rows"
-                  row-key="idcard"
-                  flat
+        <q-card-section class="q-pa-sm">
+          <div class="row q-col-gutter-sm">
+            <div class="col-5">
+              <form @submit.prevent="validateForm">
+                <q-card
                   bordered
-                  :paging="true"
-                  dense
-                  class="custom-header-table"
-                  :visible-columns="visibleColumns"
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  <template v-slot:header="props">
-                    <q-tr :props="props">
-                      <q-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        style="color: #000000; font-weight: 500"
+                  <div
+                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    รายการตำแหน่ง
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="row q-col-gutter-sm col-12 q-pa-sm">
+                    <div class="col-3">
+                      <q-input
+                        v-model="formData.shortName"
+                        dense
+                        outlined
+                        readonly
+                        for="#shortName"
+                        label="ชื่อย่อหน่วยงาน"
+                      />
+                    </div>
+                    <div class="col-3">
+                      <q-input
+                        v-model="formData.prefixNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="prefixNoRef"
+                        dense
+                        outlined
+                        for="#prefixNo"
+                        label="Prefix เลขที่ตำเเหน่ง"
+                      />
+                    </div>
+                    <div class="col-3">
+                      <q-input
+                        v-model="formData.positionNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="positionNoRef"
+                        dense
+                        outlined
+                        for="#positionNo"
+                        label="เลขที่ตำแหน่ง"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`,
+                        ]"
+                      />
+                    </div>
+                    <div class="col-3">
+                      <q-input
+                        v-model="formData.suffixNo"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#suffixNo"
+                        label="Suffix เลขที่ตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <d-table
+                        ref="table"
+                        :columns="columns"
+                        :rows="rows"
+                        row-key="idcard"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="custom-header-table"
+                        :visible-columns="visibleColumns"
                       >
-                        <span class="text-weight-medium">{{ col.label }}</span>
-                      </q-th>
-                    </q-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <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>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
-              </div>
-              <div class="col-12 q-mt-sm">
-                <q-checkbox dense v-model="formData.confirm" label="ไม่ผูกกับตำแหน่งก่อนหน้า" color="teal" />
-              </div>
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                              style="color: #000000; font-weight: 500"
+                            >
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                          </q-tr>
+                        </template>
+                        <template v-slot:body="props">
+                          <q-tr :props="props" class="cursor-pointer">
+                            <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>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                    <div class="col-12 q-mt-sm">
+                      <q-checkbox
+                        dense
+                        v-model="formData.confirm"
+                        label="ไม่ผูกกับตำแหน่งก่อนหน้า"
+                        color="teal"
+                      />
+                    </div>
+                  </div>
+                  <q-separator />
+                  <q-card-actions
+                    align="right"
+                    class="bg-white text-teal q-pa-xs"
+                  >
+                    <q-btn type="submit" :label="`บันทึก`" color="public" />
+                  </q-card-actions>
+                </q-card>
+              </form>
             </div>
-          </q-card-section>
-          <q-separator />
+
+            <div class="col-5">
+              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                >
+                  เลือกตำแหน่ง
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="q-pa-sm">
+                  <div class="row col-12 q-col-gutter-sm items-start">
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-select
+                        label="ค้นหาจาก"
+                        v-model="type"
+                        :options="typeOps"
+                        emit-value
+                        dense
+                        @update:model-value="updateSelect"
+                        map-options
+                        outlined
+                        option-label="name"
+                        option-value="id"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-6">
+                      <q-input
+                        ref="searchRef"
+                        :class="inputEdit(isReadonly)"
+                        v-model="search"
+                        outlined
+                        clearable
+                        dense
+                        lazy-rules
+                        label="คำค้น"
+                        hide-bottom-space
+                        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-pa-sm"
+                        @click="searchInput()"
+                      >
+                      </q-btn>
+                    </div>
+                  </div>
+
+                  <div class="full-width q-mt-sm">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rowsPositionSelect"
+                      row-key="positionName"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="visibleColumns"
+                      selection="multiple"
+                      v-model:selected="selected"
+                    >
+                      <template v-slot:header-selection="scope">
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="scope.checkBox"
+                        />
+                      </template>
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th class="text-center">
+                            <q-checkbox
+                              keep-color
+                              color="primary"
+                              dense
+                              v-model="props.selected"
+                            />
+                          </q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <td class="text-center">
+                            <q-checkbox
+                              keep-color
+                              color="primary"
+                              dense
+                              v-model="props.selected"
+                            />
+                          </td>
+                          <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-if="col.name === 'fullName'">
+                              {{ props.prefix }}
+                            </div>
+                            <div v-else-if="col.name === 'salary'">
+                              {{ props.row.salary.toLocaleString() }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              flat
+                              dense
+                              icon="mdi-dots-vertical"
+                              class="q-pa-none q-ml-xs"
+                              color="grey-13"
+                            >
+                              <q-menu anchor="bottom middle" self="top middle">
+                                <q-list
+                                  dense
+                                  v-for="(item, index) in listMenu"
+                                  :key="index"
+                                >
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="
+                                      item.type === 'copy'
+                                        ? copyDetiail(props.row)
+                                        : ''
+                                    "
+                                  >
+                                    <q-item-section avatar>
+                                      <q-icon
+                                        :color="item.color"
+                                        :name="item.icon"
+                                        size="sm"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section>{{
+                                      item.label
+                                    }}</q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-2">
+              <form @submit.prevent="validateFormPositionEdit">
+                <q-card
+                  bordered
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    เลือกตำแหน่ง
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="row q-col-gutter-sm col-12 q-pa-sm">
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionName"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionName"
+                        label="ตำแหน่งในสายงาน"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionField"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionField"
+                        label="สายงาน"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionType"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionType"
+                        label="ประเภทตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionLevel"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionLevel"
+                        label="ระดับตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionExecutive"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionExecutive"
+                        label="ตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionExecutiveField"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionExecutiveField"
+                        label="ด้านทางการบริหาร"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        v-model="formPositionSelect.positionArea"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#positionArea"
+                        label="ด้าน/สาขา"
+                      />
+                    </div>
+                  </div>
+                  <q-separator />
+                  <q-card-actions
+                    align="right"
+                    class="bg-white text-teal q-pa-xs"
+                  >
+                    <q-btn type="submit" :label="`บันทึก`" color="public" />
+                  </q-card-actions>
+                </q-card>
+              </form>
+            </div>
+          </div>
+        </q-card-section>
+        <!-- <q-separator />
           <q-card-actions align="right" class="bg-white text-teal">
             <q-btn type="submit" :label="`บันทึก`" color="public" />
-          </q-card-actions>
-        </form>
+          </q-card-actions> -->
       </q-card>
     </q-dialog>
   </template>
diff --git a/src/modules/02_organizationalNew/components/StructureDetail.vue b/src/modules/02_organizationalNew/components/StructureDetail.vue
index 88847a66c..2068ed372 100644
--- a/src/modules/02_organizationalNew/components/StructureDetail.vue
+++ b/src/modules/02_organizationalNew/components/StructureDetail.vue
@@ -103,13 +103,13 @@ watch(
                 </div>
               </div>
               <div class="col-8 text-grey-8">
-                <p class="q-ma-none">ภายนอก {{ formData.orgPhoneEx }}</p>
+                <p class="q-ma-none">{{ formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}`:'' }}</p>
               </div>
             </div>
 
             <div class="row q-col-gutter-sm">
               <div class="offset-4 col-8 text-grey-8">
-                <p>ภายใน {{ formData.orgPhoneIn }}</p>
+                <p>{{ formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}`:'' }}</p>
               </div>
             </div>
 
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index 4c0bdf7b7..1235db9a1 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -25,6 +25,7 @@ interface FormDataAgency {
 }
 
 interface FormDataPosition {
+  shortName: string;
   prefixNo: string;
   positionNo: string;
   suffixNo: string;
@@ -71,7 +72,27 @@ interface HistoryType {
   orgRevisionName: string;
   orgRevisionIsCurrent: boolean;
   orgRevisionIsDraft: boolean;
-  orgRevisionCreatedAt: any;
+  orgRevisionCreatedAt: Date | string;
+}
+
+interface FormPositionSelect {
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+}
+
+interface RowDetailPositions {
+  positionName: string
+  positionField: string
+  positionType: string
+  positionLevel: string
+  positionExecutive: string
+  positionExecutiveField: string
+  positionArea: string
 }
 export type {
   Pagination,
@@ -85,4 +106,6 @@ export type {
   FormNewStructureRef,
   HistoryType,
   ListMenu,
+  FormPositionSelect,
+  RowDetailPositions
 };