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

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>

src/modules/06_evaluate/interface/evalute.ts

@@ -56,10 +56,16 @@ interface CertificatesForm {
   issuer: string;
 }
 
+interface ListMenu {
+  val: string;
+  label: string;
+}
+
 export type {
   FormCommand,
   FormCommandRef,
   FormSpec,
   EducationForm,
   CertificatesForm,
+  ListMenu,
 };

src/modules/06_evaluate/router.ts

@@ -1,4 +1,7 @@
-const evaluateMain = () => import("@/modules/06_evaluate/views/EvaluateMain.vue");
+const evaluateMain = () =>
+  import("@/modules/06_evaluate/views/EvaluateMain.vue");
+const evaluateStep = () =>
+  import("@/modules/06_evaluate/components/EvaluateStepMain.vue");
 
 export default [
   {
@@ -10,4 +13,23 @@ export default [
       Key: [7],
     },
   },
+
+  {
+    path: "/evaluate/add",
+    name: "evaluate-add",
+    component: evaluateStep,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
+  {
+    path: "/evaluate/detail/:id",
+    name: "evaluate-detail",
+    component: evaluateStep,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
 ];

src/modules/06_evaluate/store.ts

@@ -1,7 +1,13 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { QTableProps } from "quasar";
 
 export const useEvaluateStore = defineStore("evaluateStore", () => {
+  const filterKeyword = ref<string>("");
+  const columns = ref<QTableProps["columns"]>([]);
+  const visibleColumns = ref<string[]>([]);
+  const row = ref<any>();
+
   const tabMenu = ref<string>("1");
   const showLoadStatus = ref<boolean>(false);
   const step = ref<number>(1);
@@ -23,6 +29,11 @@ export const useEvaluateStore = defineStore("evaluateStore", () => {
   const evaluateId = ref<string>("");
 
   return {
+    filterKeyword,
+    columns,
+    visibleColumns,
+    row,
+
     tabMenu,
     step,
     currentStep,

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -5,8 +5,10 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import Tab1 from "@/modules/06_evaluate/components/Tab1.vue"; // ชำนาญการ
+import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
-import Tab2 from "@/modules/06_evaluate/components/Tab2.vue"; // ชำนาญการพิเศษ
+
+import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluate.vue";
+import DialogMain from "@/modules/06_evaluate/components/DialogMain.vue";
 
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -17,12 +19,30 @@ const router = useRouter();
 const $q = useQuasar();
 
 const { showLoader, hideLoader, messageError } = mixin;
+
+const listMenu = ref<ListMenu[]>([
+  {
+    val: "EXPERT",
+    label: "ประเมินชำนาญการ",
+  },
+  {
+    val: "SPECIAL_EXPERT",
+    label: "ประเมินชำนาญการพิเศษ",
+  },
+]);
+const modal = ref<boolean>(false);
+const menu = ref<ListMenu>();
+
+function onclickAddEvaluate(data: ListMenu) {
+  modal.value = !modal.value;
+  menu.value = data;
+}
 </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
+        <q-btn
           icon="mdi-arrow-left"
           unelevated
           round
@@ -31,43 +51,73 @@ const { showLoader, hideLoader, messageError } = mixin;
           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-card bordered class="col-12 row caedNone q-pa-md">
-          <q-card class="col-12 items-center">
+          <div class="row col-12 q-mb-sm q-col-gutter-sm">
-            <q-tabs
+            <div class="col-xs-12 col-sm-3 col-md-2">
-              v-model="store.tabMenu"
+              <q-btn size="12px" flat round color="primary" icon="mdi-plus">
-              dense
+                <q-menu>
-              align="left"
+                  <q-list style="min-width: auto">
-              inline-label
+                    <q-item
-              class="rounded-borders"
+                      v-for="(item, index) in listMenu"
-              indicator-color="primary"
+                      :key="index"
-              active-bg-color="teal-1"
+                      clickable
-              active-class="text-primary"
+                      v-close-popup
-            >
+                      @click.stop="onclickAddEvaluate(item)"
-              <q-tab name="1" label="ชำนาญการ" />
+                    >
-              <q-tab name="2" label="ชำนาญการพิเศษ" />
+                      <q-item-section>{{ item.label }}</q-item-section>
-            </q-tabs>
+                      <q-tooltip>{{ item.label }}</q-tooltip>
-            <q-separator />
+                    </q-item>
-            <q-tab-panels v-model="store.tabMenu" animated>
+                  </q-list>
-              <q-tab-panel name="1">
+                </q-menu>
-                <Tab1 :title="'ชำนาญการ'" :step="store.step" />
+                <q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>
-              </q-tab-panel>
+              </q-btn>
-
+            </div>
-              <q-tab-panel name="2">
+            <q-space />
-                <Tab1 :title="'ชำนาญการพิเศษ'" :step="store.step"
+            <div class="col-xs-12 col-sm-3 col-md-2">
-              /></q-tab-panel>
+              <q-input
-            </q-tab-panels>
+                dense
-          </q-card>
+                outlined
+                v-model="store.filterKeyword"
+                label="ค้นหา"
+                debounce="300"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-2">
+              <q-select
+                v-model="store.visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="store.columns"
+                option-value="name"
+                options-cover
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <TableListEvaluate />
+          </div>
         </q-card>
       </div>
     </div>
   </div>
+
+  <DialogMain :modal="modal" :menu="menu" :close="onclickAddEvaluate" />
 </template>
 
 <style lang="scss" scoped></style>