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

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>