KPI

src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("rows", { required: true });
+const dataRows = ref<any[]>([]);
+
+const visibleColumns = ref<String[]>([ "description"]);
+const columns = ref<QTableProps["columns"]>([
+
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  dataRows.value = [];
+}
+
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <DialogHeader :tittle="`ข้อมูลพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย`" :close="closeDialog" />
+      <q-separator />
+
+      <q-card-section class="q-pa-sm scroll" style="max-height: 80vh">
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="level"
+              virtual-scroll
+              :rows="rows"
+              hide-pagination
+              :columns="columns"
+              :visible-columns="visibleColumns"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="bg-grey-2"
+                  >
+                    <span class="text-weight-bold">{{ 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 = 'description')">
+                      <span v-html="col.value"></span>
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card bordered flat>
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span
+                          ></q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+              <template v-slot:no-data="{ icon, message }">
+                <div class="q-pa-md text-weight-bold full-width text-center">
+                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                </div>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+.custom-table2 {
+  .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>