ประเมินบุคคล => รายการชื่อกรรมการ

src/modules/12_evaluatePersonal/components/Director/MainPage.vue

@@ -1,22 +1,33 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import router from "@/router";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
-import { useEvaluateDirectorDataStore } from "@/modules/12_evaluatePersonal/store/DirectorStore";
-
+import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importComponents
+ */
+import DialogDetail from "@/modules/12_evaluatePersonal/components/Director/DialogDetail.vue";
+
+/**
+ * importStore
+ */
+import { useEvaluateDirectorDataStore } from "@/modules/12_evaluatePersonal/store/DirectorStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
 const $q = useQuasar();
 const dataStore = useEvaluateDirectorDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
-// const currentPage = ref<number>(1);
-// const maxPage = ref<number>(1);
-// const page = ref<number>(1);
-// const rowsPerPage = ref<number>(10);
+const modalDetail = ref<boolean>(false);
+const directorId = ref<string>("");
+const actionType = ref<string>("");
 
 /**
  *pagination ของตาราง
@@ -27,23 +38,6 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getList();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getList();
-//   }
-// );
-
 function getList() {
   showLoader();
   http
@@ -72,21 +66,28 @@ function clickDelete(id: string) {
  * ลบข้อมูล
  * @param id type
  */
-async function deleteData(id: string) {
+function deleteData(id: string) {
   showLoader();
-  await http
+  http
     .delete(config.API.evaluateDirectorById(id))
-    .then(() => {
+    .then(async () => {
+      getList();
       success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
-      await getList();
+    .finally(() => {
+      hideLoader();
     });
 }
 
+function onOpenDetail(id: string, type: string) {
+  directorId.value = id;
+  actionType.value = type;
+  modalDetail.value = true;
+}
+
 /**
  * ค้นหาในตาราง
  */
@@ -114,7 +115,7 @@ onMounted(() => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div>
+      <div v-if="checkPermission($route)?.attrIsCreate">
         <q-btn
           @click="router.push(`/evaluate/director/add`)"
           size="12px"
@@ -180,17 +181,6 @@ onMounted(() => {
         v-model:pagination="pagination"
         :visible-columns="dataStore.visibleColumns"
       >
-        <!-- <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="currentPage"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template> -->
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width />
@@ -200,26 +190,47 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.pervent="onOpenDetail(props.row.id, 'VIEW')"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsGet &&
+                  checkPermission($route)?.attrIsUpdate
+                "
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click.pervent="onOpenDetail(props.row.id, 'EDIT')"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
                 size="12px"
                 flat
                 round
                 color="red"
-                @click="clickDelete(props.row.id)"
+                @click.pervent="clickDelete(props.row.id)"
                 icon="mdi-delete"
               >
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="router.push(`/evaluate/director/${props.row.id}`)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -227,10 +238,17 @@ onMounted(() => {
                 {{ col.value }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
     </div>
   </q-card>
+
+  <!-- รายละเอียด -->
+  <DialogDetail
+    v-model:modal="modalDetail"
+    :directorId="directorId"
+    :actionType="actionType"
+    :fetchDataList="getList"
+  />
 </template>