ui pop up history

src/modules/11_discipline/components/4_Result/DialogHistory.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watchEffect,
+  watch,
+  type PropType,
+  onMounted,
+} from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader,date2Thai } = mixin;
+const listCheck = ref<string>("");
+const props = defineProps({
+  modal: Boolean,
+  personId: {
+    type: String,
+    default: "",
+  },
+  close: Function,
+});
+const rows = ref<any>();
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "directions",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "directions",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateDirections",
+    align: "left",
+    label: "วันที่ส่งไปออกคำสั่ง",
+    sortable: true,
+    field: "dateDirections",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(() => {
+  const data = [
+    {
+      id: "1",
+      directions: "จำลอง1",
+      dateDirections: date2Thai(new Date(),false,true),
+    },
+    {
+      id: "2",
+      directions: "จำลอง2",
+      dateDirections: date2Thai(new Date(),false,true),
+    },
+  ];
+
+  rows.value = data;
+});
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 40vw">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`ประวัติการออกคำสั่ง ${props.personId}`"
+          :close="props.close"
+        />
+        <q-separator />
+        <q-card-section>
+          <d-table
+            ref="table"
+            flat
+            bordered
+            :columns="columns"
+            :rows="rows"
+            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>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  border-radius: 5px;
+  border: 1px solid #1bb19ab8;
+  color: #1bb19ab8 !important;
+}
+</style>