From 7db2ff22600fd5c7925be544097c39551bafaac8 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 18 Oct 2023 17:39:08 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A2=20>=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=9E=E0=B8=B7=E0=B9=89=E0=B8=99=E0=B8=90=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=20>=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainProbation.vue    |  59 +------
 .../6_BasicInformation/Director/AddPage.vue   |  34 ++++
 .../6_BasicInformation/Director/EditPage.vue  |  56 +++++++
 .../6_BasicInformation/Director/Form.vue      | 145 +++++++++++++++++
 .../6_BasicInformation/Director/MainPage.vue  | 147 +++++++++++++++++-
 .../interface/request/director.ts             |  24 +++
 .../interface/response/director.ts            |  12 ++
 src/modules/11_discipline/router.ts           |  32 +++-
 .../11_discipline/stroes/DirectorStore.ts     |  91 +++++++++++
 9 files changed, 535 insertions(+), 65 deletions(-)
 create mode 100644 src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
 create mode 100644 src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
 create mode 100644 src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
 create mode 100644 src/modules/11_discipline/interface/request/director.ts
 create mode 100644 src/modules/11_discipline/interface/response/director.ts
 create mode 100644 src/modules/11_discipline/stroes/DirectorStore.ts

diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 3669b9d93..2d5e4e7af 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -473,7 +473,7 @@ function filterFn(val: string, update: any) {
         />
       </div>
       <div class="col-12">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -524,7 +524,7 @@ function filterFn(val: string, update: any) {
               direction-links
             ></q-pagination>
           </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </q-card>
@@ -559,7 +559,7 @@ function filterFn(val: string, update: any) {
             </template>
           </q-input>
           <div class="col-12">
-            <q-table
+            <d-table
               ref="table2"
               :columns="columns2"
               :rows="rows2"
@@ -633,59 +633,10 @@ function filterFn(val: string, update: any) {
                   direction-links
                 ></q-pagination>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </q-card-section>
       </q-form>
     </q-card>
   </q-dialog>
-</template>
-
-<style lang="scss" scope>
-.filter-card {
-  background-color: #f1f1f1b0;
-}
-
-.toggle-expired-account {
-  font-size: 12px;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 150%;
-  color: #35373c;
-}
-
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
new file mode 100644
index 000000000..1b213644c
--- /dev/null
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
+
+const router = useRouter();
+
+// บันทึกข้อมูล
+const onSubmit = async () => {
+  // post
+  router.push(`/discipline/director`)
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+        @click="$router.push(`/discipline/director`)" />
+      เพิ่มรายชื่อกรรมการ
+    </div>
+
+    <Form :on-submit="onSubmit" />
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
new file mode 100644
index 000000000..a28ba42a2
--- /dev/null
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onMounted, reactive } from "vue";
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
+import type { FormData } from "@/modules/11_discipline/interface/request/director";
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
+
+onMounted(() => {
+  fetchData()
+});
+
+// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+const data = reactive<FormData>({
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  responsibilities: "",
+  email: "",
+})
+const fetchData = async () => {
+  // ดึงค่าจาก api
+  data.prefix = "นาง"
+  data.firstname = "เกสินี"
+  data.lastname = "เจียรสุมัย"
+  data.position = "ครู"
+  data.phone = "0800808080"
+  data.responsibilities = "ประธาน"
+  data.email = "e@email.com"
+};
+
+// แก้ไขข้อมูล
+const onSubmit = async (id: string) => {
+   // put
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+        @click="$router.push(`/discipline/director`)" />
+      แก้ไขรายชื่อกรรมการ
+    </div>
+
+    <Form @onSubmit="onSubmit" :data="data" />
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
new file mode 100644
index 000000000..00f82acc0
--- /dev/null
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import type { FormData, FormRef } from "@/modules/11_discipline/interface/request/director";
+
+// รับ props มาจาก page หลัก
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+// ข้อมูลรหัสบัตรประชาชน
+const idCard = ref<string>("");
+const idCardRef = ref<any>(null)
+
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  responsibilities: "",
+  email: "",
+});
+
+watch(props.data, async () => {
+  console.log("data==>", props.data)
+  formData.prefix = props.data.prefix
+  formData.firstname = props.data.firstname
+  formData.lastname = props.data.lastname
+  formData.position = props.data.position
+  formData.phone = props.data.phone
+  formData.responsibilities = props.data.responsibilities
+  formData.email = props.data.email
+});
+
+// เพิ่มบุคลากร
+function addEmployee() {
+  if (idCardRef.value.validate()) {
+    console.log("idCard===>", idCard.value)
+  }
+}
+
+// ตรวจสอบข้อมูลก่อนส่งไปยัง api
+const prefixRef = ref<object | null>(null)
+const firstnameRef = ref<object | null>(null)
+const lastnameRef = ref<object | null>(null)
+const positionRef = ref<object | null>(null)
+const phoneRef = ref<object | null>(null)
+const responsibilitiesRef = ref<object | null>(null)
+const emailRef = ref<object | null>(null)
+const formRef: FormRef = {
+  prefix: prefixRef,
+  firstname: firstnameRef,
+  lastname: lastnameRef,
+  position: positionRef,
+  phone: phoneRef,
+  responsibilities: responsibilitiesRef,
+  email: emailRef
+};
+
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    props.onSubmit()
+  }
+};
+</script>
+<template>
+  <form @submit.prevent.stop="onValidate" class="q-gutter-md">
+    <div class="col-12">
+
+      <q-card bordered>
+
+        <div class="row q-pa-md q-col-gutter-sm">
+          <div class="col-md-3 row q-pa-md text-bold">
+            <label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
+          </div>
+          <div class="col-md-6">
+            <q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" />
+          </div>
+          <div class="col-md-2">
+            <q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร" />
+          </div>
+        </div>
+
+        <div class="row q-px-md q-col-gutter-sm">
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef"
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" />
+          </div>
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef"
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" />
+          </div>
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" />
+          </div>
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" />
+          </div>
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" />
+          </div>
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" />
+          </div>
+          <div class="col-md-3">
+            <q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" />
+          </div>
+        </div>
+
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn type="submit" flat round color="public" icon="mdi-content-save-outline">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+
+      </q-card>
+    </div>
+  </form>
+</template>
\ No newline at end of file
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index ebbd2a7f8..92b837c33 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -1,9 +1,146 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useDisciplineDirectorDataStore } from '@/modules/11_discipline/stroes/DirectorStore'
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+const $q = useQuasar();
+const dataStore = useDisciplineDirectorDataStore()
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
+
+onMounted(() => {
+  // get ข้อมูลแล้วโยนใส่ store
+  dataStore.fetchData([
+    {
+      no: 1,
+      name: "นางเกสินี เจียรสุมัย",
+      position: "ครู",
+      responsibilities: "ประธาน",
+      email: "e@email.com",
+      phone: "0800808080",
+    },
+    {
+      no: 2,
+      name: "นายสรวิชญ์ พลสิทธิ์",
+      position: "ทดลองงาน",
+      responsibilities: "เลขานุการ",
+      email: "g@gmail.com",
+      phone: "0614565145",
+    },
+  ])
+});
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+function resetFilter() {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+// กำหนด pagination
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 25,
+});
+
+function clickDelete(id: string) {
+  dialogRemove(
+    $q,
+    async () => {
+      // ยืนยันการลบข้อมูล
+      //   showLoader();
+      //   await http
+      //     .delete(config.API.periodExamId(id))
+      //     .then((res) => {
+      //       success($q, "ลบข้อมูลสำเร็จ");
+      //     })
+      //     .catch((e) => {
+      //       messageError($q, e);
+      //     })
+      //     .finally(async () => {
+      //       hideLoader();
+      //     });
+    }
+  );
+};
+</script>
 <template>
-  <div>
-    <h1>กรรมการ</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการชื่อกรรมการ
   </div>
-</template>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn @click="$router.push(`/discipline/director/add`)" size="12px" flat round color="add" icon="mdi-plus">
+            <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
 
-<style scoped></style>
\ No newline at end of file
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+          </template>
+        </q-input>
+
+        <q-select v-model="dataStore.visibleColumns" multiple outlined dense options-dense
+          :display-value="$q.lang.table.columns" emit-value map-options :options="dataStore.columns" option-value="name"
+          options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
+      </div>
+
+      <div class="col-12">
+        <d-table :columns="dataStore.columns" :rows="dataStore.rows" :filter="filterKeyword" row-key="tb-list" flat
+          bordered :paging="true" dense v-model:pagination="pagination" :visible-columns="dataStore.visibleColumns">
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="$router.push(`/discipline/director/${props.row.no}`)">
+                <!-- <div v-if="col.name == 'phone'">
+                      {{ props.rowIndex + 1 }}
+                    </div> -->
+                <div>
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width>
+                <q-btn dense size="12px" flat round color="red" @click="clickDelete(props.row.id)" icon="mdi-delete">
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+
+      </div>
+    </div>
+  </q-card>
+</template>
\ No newline at end of file
diff --git a/src/modules/11_discipline/interface/request/director.ts b/src/modules/11_discipline/interface/request/director.ts
new file mode 100644
index 000000000..0e2915927
--- /dev/null
+++ b/src/modules/11_discipline/interface/request/director.ts
@@ -0,0 +1,24 @@
+interface FormData {
+    prefix: string;
+    firstname: string;
+    lastname: string;
+    position: string;
+    phone: string;
+    responsibilities: string;
+    email: string;
+}
+interface FormRef {
+    prefix: object | null;
+    firstname: object | null;
+    lastname: object | null;
+    position: object | null;
+    phone: object | null;
+    responsibilities: object | null;
+    email: object | null;
+    [key: string]: any;
+}
+
+export type {
+    FormData,
+    FormRef
+};
\ No newline at end of file
diff --git a/src/modules/11_discipline/interface/response/director.ts b/src/modules/11_discipline/interface/response/director.ts
new file mode 100644
index 000000000..33d3e6a37
--- /dev/null
+++ b/src/modules/11_discipline/interface/response/director.ts
@@ -0,0 +1,12 @@
+interface DirectorRows {
+    no: number;
+    name: string;
+    position: string;
+    responsibilities: string;
+    email: string;
+    phone: string;
+}
+
+export type {
+    DirectorRows
+};
\ No newline at end of file
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index d0a715198..8744c5a70 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -18,14 +18,22 @@ const directorMain = () =>
   import(
     "@/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue"
   );
+  const directorAdd = () =>
+  import(
+    "@/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue"
+  );
+  const directorEdit = () =>
+  import(
+    "@/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue"
+  );
 const channelMain = () =>
   import(
     "@/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue"
   );
-  const channelAdd = () =>
+const channelAdd = () =>
   import(
     "@/modules/11_discipline/components/6_BasicInformation/Channel/addChannel.vue"
-  );  
+  );
 const complaintAdd = () =>
   import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
 const reportType = () =>
@@ -35,7 +43,8 @@ const InvestigateDisciplinaryAdd = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue"
   );
-const orderPage = () => import("@/modules/11_discipline/components/4_Order/OrderPage.vue")
+const orderPage = () =>
+  import("@/modules/11_discipline/components/4_Order/OrderPage.vue");
 export default [
   {
     path: "/discipline/complaints",
@@ -107,6 +116,7 @@ export default [
       Role: "coin",
     },
   },
+  // ข้อมูลพื้นฐาน กรรมการ
   {
     path: "/discipline/director",
     name: "/discipline-director",
@@ -118,9 +128,19 @@ export default [
     },
   },
   {
-    path: "/discipline/director",
-    name: "/discipline-director",
-    component: directorMain,
+    path: "/discipline/director/add",
+    name: "discipline-director-add",
+    component: directorAdd,
+    meta: {
+      Auth: true,
+      Key: [11.6],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/discipline/director/:id",
+    name: "discipline-director-edit",
+    component: directorEdit,
     meta: {
       Auth: true,
       Key: [11.6],
diff --git a/src/modules/11_discipline/stroes/DirectorStore.ts b/src/modules/11_discipline/stroes/DirectorStore.ts
new file mode 100644
index 000000000..9309c983f
--- /dev/null
+++ b/src/modules/11_discipline/stroes/DirectorStore.ts
@@ -0,0 +1,91 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DirectorRows } from "@/modules/11_discipline/interface/response/director";
+import type { QTableProps } from "quasar";
+
+// store ระบบวินัย >> ข้อมูลพื้นฐาน >> กรรมการ
+export const useDisciplineDirectorDataStore = defineStore(
+  "disciplineDirector",
+  () => {
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>([
+      "no",
+      "name",
+      "position",
+      "responsibilities",
+      "email",
+      "phone",
+    ]);
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "name",
+        align: "left",
+        label: "ชื่อ-นามสกุล",
+        sortable: true,
+        field: "name",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "position",
+        align: "left",
+        label: "ตำแหน่ง",
+        sortable: true,
+        field: "position",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "responsibilities",
+        align: "left",
+        label: "หน้าที่",
+        sortable: true,
+        field: "responsibilities",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "email",
+        align: "left",
+        label: "อีเมล",
+        sortable: true,
+        field: "email",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "phone",
+        align: "left",
+        label: "เบอร์โทรศัพท์",
+        sortable: true,
+        field: "phone",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+
+    // ข้อมูลในตาราง
+    const rows = ref<DirectorRows[]>([]);
+    function fetchData(data: DirectorRows[]) {
+      rows.value = data
+    }
+
+    return {
+      visibleColumns,
+      columns,
+      rows,
+      fetchData
+    };
+  }
+);