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

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 Tab2 from "@/modules/06_evaluate/components/Tab2.vue"; // ชำนาญการพิเศษ
+import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
+
+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 class="col-12 items-center">
-            <q-tabs
-              v-model="store.tabMenu"
-              dense
-              align="left"
-              inline-label
-              class="rounded-borders"
-              indicator-color="primary"
-              active-bg-color="teal-1"
-              active-class="text-primary"
-            >
-              <q-tab name="1" label="ชำนาญการ" />
-              <q-tab name="2" label="ชำนาญการพิเศษ" />
-            </q-tabs>
-            <q-separator />
-            <q-tab-panels v-model="store.tabMenu" animated>
-              <q-tab-panel name="1">
-                <Tab1 :title="'ชำนาญการ'" :step="store.step" />
-              </q-tab-panel>
-
-              <q-tab-panel name="2">
-                <Tab1 :title="'ชำนาญการพิเศษ'" :step="store.step"
-              /></q-tab-panel>
-            </q-tab-panels>
-          </q-card>
+        <q-card bordered class="col-12 row caedNone q-pa-md">
+          <div class="row col-12 q-mb-sm q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-3 col-md-2">
+              <q-btn size="12px" flat round color="primary" icon="mdi-plus">
+                <q-menu>
+                  <q-list style="min-width: auto">
+                    <q-item
+                      v-for="(item, index) in listMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="onclickAddEvaluate(item)"
+                    >
+                      <q-item-section>{{ item.label }}</q-item-section>
+                      <q-tooltip>{{ item.label }}</q-tooltip>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+                <q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>
+              </q-btn>
+            </div>
+            <q-space />
+            <div class="col-xs-12 col-sm-3 col-md-2">
+              <q-input
+                dense
+                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>