ประเมินผลการปฏิบัติราชการ = > tab ผู้ประเมิน

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -146,7 +146,7 @@ const resultWork = computed(() => {
 
 function getCriteria() {
   http
-    .get(config.API.KpiEvaluation)
+    .get(config.API.KpiEvaluationInfo)
     .then((res) => {
       const data = res.data.result.data;
       dataListCriteria.value = data;

src/modules/08_KPI/components/Tab/02_Evaluator.vue

@@ -1,3 +1,159 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  type: {
+    type: String,
+    require: true,
+  },
+});
+
+/** Table*/
+const visibleColumns = ref<string[]>(["topic", "reason"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อ",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "ความคิดเห็น",
+    sortable: true,
+    field: "reason",
+    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 filterKeyword = ref<string>("");
+
+onMounted(() => {
+  console.log(props.type);
+});
+</script>
 <template>
-  <div class="q-pa-md">ผู้ประเมิน</div>
+  <div class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <q-btn flat round dense icon="add" color="blue-4">
+        <q-tooltip>เสนอความคิดเห็น</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-col-gutter-sm">
+        <q-input
+          outlined
+          dense
+          debounce="300"
+          v-model="filterKeyword"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+    <div class="col-12">
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        dense
+        hide-pagination
+        class="custom-table"
+        :visible-columns="visibleColumns"
+        :rows-per-page-options="[20]"
+        no-data-label="ไม่มีข้อมูล"
+      >
+        <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">
+              <div>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.custom-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;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    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>

src/modules/08_KPI/components/Tab/TabMain.vue

@@ -83,9 +83,9 @@ const splitterModel = ref<number>(12);
           class="q-pa-none"
         >
           <Assessment v-if="store.tabMain === '1'" />
-          <Evaluator v-if="store.tabMain === '2'" />
-          <CommanderAbove v-if="store.tabMain === '3'" />
-          <CommanderAboveOneStep v-if="store.tabMain === '4'" />
+          <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
+          <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
+          <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
           <File v-if="store.tabMain === '5'" />
         </q-tab-panel>
       </q-tab-panels>