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

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+
+import DialogMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue";
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateMeeting",
+    align: "left",
+    label: "วันเวลาในการประชุม",
+    sortable: true,
+    field: "dateMeeting",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "results",
+    align: "left",
+    label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
+    sortable: true,
+    field: "results",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "timePeriod",
+    align: "left",
+    label: "ระยะเวลาในการแก้ไขผลงาน",
+    sortable: true,
+    field: "timePeriod",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any[]>([]);
+
+const modalAdd = ref<boolean>(false);
+const filter = ref<string>("");
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+const maxPage = ref<number>(1);
+const listMeet = ref<any>([]);
+
+function onClickAdd() {
+  modalAdd.value = true;
+}
+
+function onClickClose() {
+  modalAdd.value = false;
+}
+
+async function fetchListMeet() {}
+
+/**
+ * function อัดเดท Paging กรรมการ
+ * @param rpp ต่อหน้า
+ * @param p หน้า
+ */
+async function updatePaging(rpp: number, p: number) {
+  page.value = p;
+  rowsPerPage.value = rpp;
+}
+
+/**
+ * function return รายชื่อกรรมการที่เลือก
+ * @param data รายชื่อกรรมการที่เลือก
+ */
+function returnData(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-xs-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>
+
+  <DialogMeet
+    v-model:Modal="modalAdd"
+    :clickClose="onClickClose"
+    :rows2="listMeet"
+    v-model:filterKeyword2="filter"
+    :get-list="fetchListMeet"
+    :rowsPerPage="rowsPerPage"
+    :page="page"
+    :maxPage="maxPage"
+    :selected-row="rows"
+    @update:pagination="updatePaging"
+    @returnDirector="returnData"
+  />
+</template>
+
+<style scoped></style>