แก้ชื่อเมนู, popup คุณสมบัติ

src/components/Table.vue

@@ -2,18 +2,19 @@
   <div class="q-pb-sm row">
     <div>
       <q-btn
-          size="14px"
+        v-if="viewMode"
-          flat
+        size="14px"
-          dense
+        flat
-          color="blue"
+        dense
-          @click="add"
+        color="blue"
-          icon="mdi-plus"
+        @click="add"
-        >
+        icon="mdi-plus"
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      >
-        </q-btn>
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
     </div>
     <q-space />
-    <div class="items-center q-gutter-sm" style="display: flex">
+    <div v-if="viewMode" class="items-center q-gutter-sm" style="display: flex">
       <!-- ค้นหาข้อความใน table -->
       <q-input
         standout
@@ -84,6 +85,7 @@
     </q-table>
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 const attrs = ref<any>(useAttrs());
@@ -106,6 +108,11 @@ const props = defineProps({
 
   inputShow: Boolean,
 
+  viewMode: {
+    type: Boolean,
+    default: true,
+  },
+
   add: {
     type: Function,
     default: () => console.log("not function"),

src/modules/01_dashboard/views/Dashboard.vue

@@ -33,8 +33,8 @@ const items = ref<any>([
   },
   {
     icon: "mdi-clipboard-account-outline",
-    title: "ประเมินผล",
+    title: "ประเมินบุคคล",
-    sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
+    sub: "ข้อมูลการประเมินบุคคล",
     color: "lime-4",
     path: "/evaluate",
     active: false,

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

@@ -1,5 +1,188 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import Table from "@/components/Table.vue";
+
+import { ref, watch } from "vue";
+import type { QTableProps } from "quasar";
+
+const store = useEvaluateStore();
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "ตรวจสอบคุณสมบัติ",
+  },
+  desc: {
+    type: String,
+    default: "",
+  },
+  closeModal: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const filter = ref<string>("");
+
+const rows = ref<any[]>([
+  {
+    degree: "ปริญญาตรี หรือเทียบเท่า",
+    level: "หลักสูตร ๔ ปี",
+    expert: "๖ ปี",
+    special: "๘ ปี",
+    checked: "",
+  },
+  {
+    degree: "ปริญญาตรี หรือเทียบเท่า",
+    level: "หลักสูตร ๕ ปี",
+    expert: "๕ ปี",
+    special: "๗ ปี",
+    checked: "",
+  },
+  {
+    degree: "ปริญญาตรี หรือเทียบเท่า",
+    level: "หลักสูตร ๖ ปี",
+    expert: "๔ ปี",
+    special: "๖ ปี",
+    checked: "",
+  },
+  {
+    degree: "ปริญญาโท หรือเทียบเท่า",
+    level: "-",
+    expert: "๔ ปี",
+    special: "๖ ปี",
+    checked: "",
+  },
+  {
+    degree: "ปริญญาเอก หรือเทียบเท่า",
+    level: "-",
+    expert: "๒ ปี",
+    special: "๔ ปี",
+    checked: "",
+  },
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "degree",
+    align: "left",
+    label: "คุณวุฒิ",
+    sortable: false,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expert",
+    align: "center",
+    label: "ชำนาญการ",
+    sortable: false,
+    field: "expert",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "special",
+    align: "center",
+    label: "ชำนาญการพิเศษ",
+    sortable: false,
+    field: "special",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checked",
+    align: "center",
+    label: "",
+    sortable: false,
+    field: "checked",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<string[]>(
+  store.tabMenu == "1"
+    ? ["degree", "level", "expert"]
+    : ["degree", "level", "special"]
+);
+
+watch(props, () => {
+  if (!props.show) {
+    visibleColumns.value = ["degree", "level", "checked"];
+  } else {
+    if (store.tabMenu == "1") {
+      visibleColumns.value = ["degree", "level", "expert"];
+    } else {
+      visibleColumns.value = ["degree", "level", "special"];
+    }
+  }
+});
+</script>
 
 <template>
-    
+  <q-dialog v-model="props.modal" persistent>
-</template>
+    <q-card style="width: 40vw">
+      <DialogHeader :tittle="props.title" :close="props.closeModal" />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <Table
+          style="max-height: 80vh"
+          :view-mode="false"
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          v-model:inputfilter="filter"
+          v-model:inputvisible="visibleColumns"
+          :pagination="false"
+          :paging="false"
+          :inputShow="false"
+          :titleText="''"
+        >
+          <template #columns="props">
+            <q-tr :props="props">
+              <!-- <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td> -->
+              <q-td key="degree" :props="props">
+                {{ props.row.degree }}
+              </q-td>
+              <q-td key="level" :props="props">
+                {{ props.row.level }}
+              </q-td>
+              <q-td key="expert" :props="props">
+                {{ props.row.expert }}
+              </q-td>
+              <q-td key="special" :props="props">
+                {{ props.row.special }}
+              </q-td>
+              <q-td key="checked" :props="props">
+                <q-icon name="checked" color="primary" />
+              </q-td>
+            </q-tr>
+          </template>
+        </Table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/06_evaluate/components/step/step1.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import PopupCheckFeatures from "@/modules/06_evaluate/components/PopupCheckFeatures.vue";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
@@ -19,6 +20,8 @@ const props = defineProps({
   },
 });
 
+const modal = ref<boolean>(false);
+const show = ref<boolean>(false);
 const emit = defineEmits(["update:spec"]);
 
 const formData = reactive<any>({
@@ -56,6 +59,15 @@ async function fetchCheckSpec(id: string) {
     });
 }
 
+function openModal(status: boolean) {
+  modal.value = true;
+  show.value = status
+}
+
+function closeModal() {
+  modal.value = false;
+}
+
 onMounted(() => {
   console.log(store.step);
 
@@ -77,7 +89,14 @@ onMounted(() => {
       <q-item-section>
         <q-item-label
           >คุณวุฒิการศึกษา
-          <q-btn flat round dense color="info" icon="info">
+          <q-btn
+            flat
+            round
+            dense
+            color="info"
+            icon="info"
+            @click="openModal(false)"
+          >
             <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
           </q-btn>
         </q-item-label>
@@ -121,7 +140,14 @@ onMounted(() => {
       <q-item-section>
         <q-item-label
           >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-          <q-btn flat round dense color="info" icon="info">
+          <q-btn
+            flat
+            round
+            dense
+            color="info"
+            icon="info"
+            @click="openModal(true)"
+          >
             <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
           </q-btn></q-item-label
         >
@@ -178,6 +204,8 @@ onMounted(() => {
       </q-item-section>
     </q-item>
   </q-list>
+
+  <PopupCheckFeatures :modal="modal" :show="show" :close-modal="closeModal" />
 </template>
 
 <style scoped></style>

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

@@ -32,7 +32,7 @@ const { showLoader, hideLoader, messageError } = mixin;
           class="q-mr-sm"
           @click="router.go(-1)"
         /> -->
-        <div>ประเมินผล</div>
+        <div>ประเมินบุคคล</div>
       </div>
     </div>