137 lines
3.3 KiB
Vue
137 lines
3.3 KiB
Vue
<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";
|
|
|
|
/**
|
|
* importStore
|
|
*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
/**
|
|
* use
|
|
*/
|
|
const $q = useQuasar();
|
|
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
|
useCounterMixin();
|
|
|
|
/**
|
|
* props
|
|
*/
|
|
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 },
|
|
});
|
|
|
|
// ชื่อ Dialog
|
|
const title = computed(() =>
|
|
actionType.value === "VIEW" ? "รายละเอียด" : "แก้ไขรายชื่อกรรมการ"
|
|
);
|
|
|
|
/**
|
|
* get ข้อมูลเก่ากรณีแก้ไขข้อมูล
|
|
*/
|
|
const dataDettail = reactive<FormData>({
|
|
personalId: "",
|
|
prefix: "",
|
|
firstname: "",
|
|
lastname: "",
|
|
position: "",
|
|
phone: "",
|
|
email: "",
|
|
qualification: "",
|
|
});
|
|
|
|
/**
|
|
* function fetch ช้อมูลชื่อกรรมการ
|
|
*/
|
|
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 ยืนยันการบันทึกการแก้ไขข้อมุล
|
|
* @param formData ข้อมุลชื่อกรรมการ
|
|
*/
|
|
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();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ปิด dialog
|
|
*/
|
|
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>
|