ปรับ ประเมินบุคคล

src/modules/06_evaluate/components/DialogMain.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+
+const { dialogConfirm } = mixin;
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+  },
+  menu: {
+    type: Object,
+    require: true,
+  },
+  close: {
+    type: Function,
+  },
+});
+
+function onCklicNext() {
+  dialogConfirm(
+    $q,
+    () => {
+      router.push("/evaluate/add");
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
+}
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader
+        :tittle="props.menu ? props.menu.label : ''"
+        :close="props.close"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none"> </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          unelevated
+          dense
+          color="public"
+          label="ดำเนินการต่อ"
+          @click="onCklicNext"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/06_evaluate/components/EvaluateStepMain.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+</script>
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div>ประเมินบุคคล</div>
+      </div>
+    </div>
+
+    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+      <div class="col-12 row">
+        <q-card bordered class="col-12 row caedNone q-pa-md"> </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped></style>

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+
+const store = useEvaluateStore();
+
+const props = defineProps({
+  row: {
+    type: Array as () => any[],
+    require: true,
+  },
+});
+
+/** ค้นหาคอลัม */
+const visibleColumns = ref<string[]>(["no", "type", "dateSend", "status"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "ระดับที่ยื่นขอ",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "dateSend",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    sortable: true,
+    field: "dateSend",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(() => {
+  store.columns = columns.value;
+  store.visibleColumns = visibleColumns.value;
+});
+</script>
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    :columns="columns"
+    :rows="store.row"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="store.visibleColumns"
+    :filter="store.filterKeyword"
+  >
+    <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>
+</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>