141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import { useRoute } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type { PropType } from "vue";
|
|
import type { Property } from "@/modules/05_placement/interface/index/Main";
|
|
|
|
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const route = useRoute();
|
|
const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
|
|
|
|
const props = defineProps({
|
|
statusEdit: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
data: {
|
|
type: Array as PropType<Property[]>,
|
|
default: [],
|
|
},
|
|
fetch: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
});
|
|
const emit = defineEmits(["update:statusEdit", "update:data"]);
|
|
|
|
const edit = ref<boolean>(false); //การแก้ไขข้อมูล
|
|
const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
|
|
|
|
/**
|
|
* ฟังก์ชันบันทึกการแก้ไขข้อมูล
|
|
*/
|
|
const saveData = async () => {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.put(
|
|
config.API.placementPropertyId(route.params.personalId.toString()),
|
|
props.data
|
|
)
|
|
.then(async () => {
|
|
await props.fetch("Qualification");
|
|
await success($q, "แก้ไขข้อมูลสำเร็จ");
|
|
changeBtn();
|
|
onEdit.value = false;
|
|
edit.value = false;
|
|
emit("update:statusEdit", false);
|
|
})
|
|
.catch((e: any) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* ฟังก์ชันการแก้ไขข้อมูล
|
|
*/
|
|
const changeBtn = async () => {
|
|
if (edit.value == true) {
|
|
if (props.statusEdit === true) {
|
|
} else {
|
|
emit("update:statusEdit", true);
|
|
}
|
|
} else {
|
|
emit("update:statusEdit", false);
|
|
}
|
|
};
|
|
|
|
const onCancel = async () => {
|
|
if (onEdit.value) {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
emit("update:statusEdit", false);
|
|
await props.fetch("Qualification");
|
|
edit.value = false;
|
|
onEdit.value = false;
|
|
},
|
|
`ข้อมูลมีการแก้ไข`,
|
|
`ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
|
|
);
|
|
} else {
|
|
edit.value = false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* ฟังก์ชันแก้ไขข้อมูล
|
|
*/
|
|
function checkEdit() {
|
|
onEdit.value = true;
|
|
}
|
|
|
|
/**
|
|
* ทำงานเมื่อมีการเรียกใช้ Components
|
|
*/
|
|
onMounted(() => {
|
|
emit("update:statusEdit", false);
|
|
});
|
|
</script>
|
|
<template>
|
|
<q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
|
|
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
|
|
<HeaderTop
|
|
v-model:edit="edit"
|
|
header="การคัดกรองคุณสมบัติ"
|
|
icon="mdi-account-search"
|
|
:history="false"
|
|
:changeBtn="changeBtn"
|
|
:disable="statusEdit"
|
|
:cancel="onCancel"
|
|
/>
|
|
</div>
|
|
<div class="row q-px-lg">
|
|
<div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
|
|
<q-checkbox
|
|
size="xs"
|
|
v-model="item.value"
|
|
:label="item.name"
|
|
keep-color
|
|
@update:modelValue="checkEdit"
|
|
color="gray-5"
|
|
:disable="!statusEdit"
|
|
/>
|
|
<q-separator />
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</template>
|