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

2024-08-09 10:57:07 +07:00 · 2024-08-09 10:57:07 +07:00 · a069805cd4
commit a069805cd4
parent 98147fce76
5 changed files with 256 additions and 81 deletions
--- a/src/modules/12_evaluatePersonal/components/Director/AddPage.vue
+++ b/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>
--- a/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue
+++ b/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>
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/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 () => {
-  // console.log("data==>", props.data)
-  formData.prefix = props.data.prefix;
-  formData.firstname = props.data.firstname;
-  formData.lastname = props.data.lastname;
-  formData.position = props.data.position;
-  formData.phone = props.data.phone;
-  formData.email = props.data.email;
-});
+// watch(props.data, async () => {
+//   // console.log("data==>", props.data)
+//   formData.prefix = props.data.prefix;
+//   formData.firstname = props.data.firstname;
+//   formData.lastname = props.data.lastname;
+//   formData.position = props.data.position;
+//   formData.phone = props.data.phone;
+//   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="col-3">
+          <div :class="actionType !== '' ? 'col-12' : '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 />
-      <div class="row col-12 q-pa-sm">
+      <q-separator v-if="!isReadonly" />
+      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
        <q-space />
        <q-btn
          for="ButtonOnSubmit"
--- a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
+++ b/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>
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/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-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="Detailpage(props.row.id)"
-            >
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                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>