ui ประเมินผล

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+/** รับ props Tab 1  */
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  // fetchDirector: {
+  //   type: Function,
+  //   require: true,
+  //   default: () => "",
+  // },
+  // fetchMeeting: {
+  //   type: Function,
+  //   require: true,
+  //   default: () => "",
+  // },
+  close: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusEdit",
+    align: "left",
+    label: "การแก้ไข",
+    sortable: true,
+    field: "statusEdit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "operator",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "operator",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateEdit",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "dateEdit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section>
+        <HeaderDialog :tittle="'ประวัติการประเมิน'" :close="props.close" />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
+          <div class="col-12 q-mt-sm">
+            <q-table
+              ref="table"
+              flat
+              bordered
+              class="custom-header-table"
+              :columns="columns"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+            >
+              <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" v-html="col.label" />
+                  </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>
+            </q-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table {
+  height: auto;
+  .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>