ui tab กรรมการและการประชุม

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type { Director } from "@/modules/11_discipline/interface/request/disciplinary";
+import type {
+  responseType,
+  directorType,
+} from "@/modules/11_discipline/interface/index/Main";
+
+import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";
+
+/** import store*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError } = mixin;
+
+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: "duty",
+    align: "left",
+    label: "หน้าที่",
+    sortable: true,
+    field: "duty",
+    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<Director[]>([]);
+
+const modalAddDirector = ref<boolean>(false);
+const filter = ref<string>("");
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+const maxPage = ref<number>(1);
+const listDirector = ref<any>([]);
+
+async function onClickAdd() {
+  modalAddDirector.value = true;
+}
+
+function onClickClose() {
+  modalAddDirector.value = false;
+}
+
+/** function เรียกรายชื่อกรรมการ*/
+async function fetchDListDirector() {
+  // showLoader();
+  // await http
+  //   .get(config.API.directorList(page.value, rowsPerPage.value, filter.value))
+  //   .then((res) => {
+  //     maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+  //     const data = res.data.result.data;
+  //     let datalistDirector: responseType[] = data.map((e: directorType) => ({
+  //       id: e.id,
+  //       directorId: e.directorId,
+  //       name: `${e.prefix}${e.firstName} ${e.lastName}`,
+  //       prefix: e.prefix,
+  //       firstName: e.firstName,
+  //       lastName: e.lastName,
+  //       position: e.position,
+  //       email: e.email,
+  //       phone: e.phone,
+  //       total: e.total,
+  //       duty: e.duty,
+  //     }));
+  //     // /** หารานชื่อกรรมการที่ไม่ซ้ำ*/
+  //     listDirector.value = datalistDirector.filter(
+  //       (i) => !rows.value.some((e) => e.directorId === i.id)
+  //     );
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+/**
+ * function อัดเดท Paging กรรมการ
+ * @param rpp ต่อหน้า
+ * @param p หน้า
+ */
+async function updatePaging(rpp: number, p: number) {
+  page.value = p;
+  rowsPerPage.value = rpp;
+}
+
+/**
+ * function return รายชื่อกรรมการที่เลือก
+ * @param data รายชื่อกรรมการที่เลือก
+ */
+function returnDirector(data: any) {
+  const dataList = data.map((item: any) => item.id);
+  rows.value = data;
+  onClickClose();
+}
+</script>
+
+<template>
+  <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+    <div
+      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+    >
+      กรรมการ
+      <q-btn
+        size="12px"
+        flat
+        round
+        dense
+        color="add"
+        class="q-ml-sm"
+        icon="mdi-plus"
+        @click="onClickAdd"
+      >
+        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12 q-pa-sm row">
+      <d-table
+        ref="table"
+        flat
+        bordered
+        dense
+        class="col-12"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :paging="true"
+      >
+        <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-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>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogDirector
+    v-model:Modal="modalAddDirector"
+    :clickClose="onClickClose"
+    :rows2="listDirector"
+    v-model:filterKeyword2="filter"
+    :get-list="fetchDListDirector"
+    :rowsPerPage="rowsPerPage"
+    :page="page"
+    :maxPage="maxPage"
+    :selected-row="rows"
+    @update:pagination="updatePaging"
+    @returnDirector="returnDirector"
+  />
+</template>
+
+<style scoped></style>