หน้ารายการผู้ประเมิน => เพิ่ม tab

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+import type { QTableProps } from "quasar";
+const router = useRouter();
+const visibleColumns = defineModel<string[]>("visibleColumns", {});
+const columns = defineModel<QTableProps["columns"]>("columns", {});
+const rows = defineModel<any[]>("rows", {});
+const formQuery = defineModel<any>("formQuery", {});
+const total = defineModel<number>("total", {});
+const maxPage = defineModel<number>("maxPage", {});
+
+const props = defineProps({
+  updatePagination: { type: Function },
+  fetchList: { type: Function },
+});
+
+function redirectViewDetail(id: string) {
+  router.push(`/KPI-evaluator/${id}`);
+}
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-table2"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+      v-model:pagination="pagination"
+      @update:pagination="props.updatePagination"
+    >
+      <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.id"
+            @click="redirectViewDetail(props.row.id)"
+          >
+            <div v-if="col.name === 'name'">
+              {{
+                `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ total }} รายการ
+        <q-pagination
+          v-model="formQuery.page"
+          active-color="primary"
+          color="dark"
+          :max="Number(maxPage)"
+          size="sm"
+          boundary-links
+          direction-links
+          :max-pages="5"
+          @update:model-value="props.fetchList"
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+import type { QTableProps } from "quasar";
+const router = useRouter();
+const visibleColumns = defineModel<string[]>("visibleColumns", {});
+const columns = defineModel<QTableProps["columns"]>("columns", {});
+const rows = defineModel<any[]>("rows", {});
+const formQuery = defineModel<any>("formQuery", {});
+const total = defineModel<number>("total", {});
+const maxPage = defineModel<number>("maxPage", {});
+
+const props = defineProps({
+  updatePagination: { type: Function },
+  fetchList: { type: Function },
+});
+
+const selected = ref([]);
+
+function redirectViewDetail(id: string) {
+  router.push(`/KPI-evaluator/${id}`);
+}
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+function test() {
+  console.log(selected.value);
+}
+</script>
+
+<template>
+  <!-- <q-btn @click="test" /> -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+      v-model:pagination="pagination"
+      @update:pagination="props.updatePagination"
+      selection="multiple"
+      v-model:selected="selected"
+    >
+      <template v-slot:header-selection="scope">
+        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+      </template>
+
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td>
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="props.selected"
+            />
+          </q-td>
+          <q-td
+            v-for="col in props.cols"
+            :key="col.id"
+            @click="redirectViewDetail(props.row.id)"
+          >
+            <div v-if="col.name === 'name'">
+              {{
+                `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ total }} รายการ
+        <q-pagination
+          v-model="formQuery.page"
+          active-color="primary"
+          color="dark"
+          :max="Number(maxPage)"
+          size="sm"
+          boundary-links
+          direction-links
+          :max-pages="5"
+          @update:model-value="props.fetchList"
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+</template>
+
+<style scoped></style>