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

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

@@ -55,7 +55,7 @@ function addData(formData: DataForm) {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="$router.push(`/evaluate/director`)"
+        @click="$router.go(-1)"
       />
       เพิ่มรายชื่อกรรมการ
     </div>

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { reactive, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormData } from "@/modules/11_discipline/interface/request/director";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const directorId = defineModel<string>("directorId", { required: true });
+const actionType = defineModel<string>("actionType", { required: true });
+const props = defineProps({
+  fetchDataList: { type: Function, required: true },
+});
+
+const title = computed(() =>
+  actionType.value === "VIEW" ? "รายละเอียด" : "แก้ไขรายชื่อกรรมการ"
+);
+
+/**
+ * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+ */
+const dataDettail = reactive<FormData>({
+  personalId: "",
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  email: "",
+  qualification: "",
+});
+
+/**
+ * ดึงค่าจาก api
+ */
+function fetchData() {
+  showLoader();
+  http
+    .get(config.API.evaluateDirectorById(directorId.value))
+    .then((res) => {
+      const data = res.data.result;
+      dataDettail.personalId = data.Id;
+      dataDettail.prefix = data.prefix;
+      dataDettail.firstname = data.firstName;
+      dataDettail.lastname = data.lastName;
+      dataDettail.position = data.position;
+      dataDettail.phone = data.phone;
+      dataDettail.email = data.email;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+function onSubmit(formData: FormData) {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.evaluateDirectorById(directorId.value), {
+        prefix: formData.prefix,
+        firstName: formData.firstname,
+        lastName: formData.lastname,
+        position: formData.position,
+        email: formData.email,
+        phone: formData.phone,
+      })
+      .then(() => {
+        props.fetchDataList?.();
+        onCloseDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onCloseDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchData();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 450px">
+      <DialogHeader :tittle="title" :close="onCloseDialog" />
+      <Form
+        :on-submit="onSubmit"
+        :data="dataDettail"
+        :actionType="actionType"
+      />
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -37,6 +37,7 @@ const {
 /**
  * รับ props มาจาก page หลัก
  */
+const actionType = defineModel<string>("actionType", { default: "" });
 const props = defineProps({
   data: {
     type: Object,
@@ -47,8 +48,10 @@ const props = defineProps({
     default: () => "",
   },
 });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+// const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
+const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
+
 /**
  * ข้อมูลเลขประจำตัวประชาชน
  */
@@ -143,15 +146,15 @@ const columnsRespondent = ref<QTableProps["columns"]>([
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
-watch(props.data, async () => {
+// watch(props.data, async () => {
-  // console.log("data==>", props.data)
+//   // console.log("data==>", props.data)
-  formData.prefix = props.data.prefix;
+//   formData.prefix = props.data.prefix;
-  formData.firstname = props.data.firstname;
+//   formData.firstname = props.data.firstname;
-  formData.lastname = props.data.lastname;
+//   formData.lastname = props.data.lastname;
-  formData.position = props.data.position;
+//   formData.position = props.data.position;
-  formData.phone = props.data.phone;
+//   formData.phone = props.data.phone;
-  formData.email = props.data.email;
+//   formData.email = props.data.email;
-});
+// });
 
 /**
  * ตรวจสอบข้อมูลก่อนส่งไปยัง api
@@ -280,12 +283,31 @@ watch(
     await searchInput();
   }
 );
+
+function fetchForm(data: any) {
+  formData.prefix = data.prefix;
+  formData.firstname = data.firstname;
+  formData.lastname = data.lastname;
+  formData.position = data.position;
+  formData.phone = data.phone;
+  formData.email = data.email;
+}
+
+onMounted(() => {
+  if (props.data) {
+    showLoader();
+    setTimeout(async () => {
+      await fetchForm(props.data);
+      await hideLoader();
+    }, 1000);
+  }
+});
 </script>
 <template>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered>
       <div class="col-12 row q-pa-md">
-        <div class="row q-col-gutter-md">
+        <div class="row col-12 q-col-gutter-md">
           <div class="col-12 q-gutter-y-sm" v-if="data === null">
             <div class="row q-col-gutter-md items-start">
               <div class="col-12 col-sm-6 col-md-3">
@@ -411,10 +433,10 @@ watch(
               </d-table>
             </div>
           </div>
-
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
-          <div class="col-3">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.prefix"
@@ -426,9 +448,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.firstname"
@@ -440,9 +463,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.lastname"
@@ -454,9 +478,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.position"
@@ -468,9 +493,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.phone"
@@ -482,9 +508,10 @@ watch(
               hide-bottom-space
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.email"
@@ -496,8 +523,8 @@ watch(
           </div>
         </div>
       </div>
-      <q-separator />
+      <q-separator v-if="!isReadonly" />
-      <div class="row col-12 q-pa-sm">
+      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
         <q-space />
         <q-btn
           for="ButtonOnSubmit"

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

@@ -1,22 +1,33 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
-import router from "@/router";
+import { checkPermission } from "@/utils/permissions";
-import { useCounterMixin } from "@/stores/mixin";
 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 modalDetail = ref<boolean>(false);
-// const maxPage = ref<number>(1);
+const directorId = ref<string>("");
-// const page = ref<number>(1);
+const actionType = ref<string>("");
-// const rowsPerPage = ref<number>(10);
 
 /**
  *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 () => {
+    .finally(() => {
-      await getList();
+      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
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="router.push(`/evaluate/director/${props.row.id}`)"
-            >
               <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>

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -249,19 +250,28 @@ onMounted(async () => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
-            <q-td
+            <q-td auto-width>
-              v-for="col in props.cols"
+              <q-btn
-              :key="col.name"
+                v-if="checkPermission($route)?.attrIsGet"
-              :props="props"
+                flat
-              @click="Detailpage(props.row.id)"
+                dense
-            >
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.stop.prevent="Detailpage(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ (page - 1) * pageSize + props.rowIndex + 1 }}
               </div>