API สมรรถนะ
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
a2279a234a
commit
4119780304
4 changed files with 228 additions and 154 deletions
|
|
@ -1,21 +1,27 @@
|
|||
div
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
/**use*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useKPIDataStore();
|
||||
|
||||
const competencyId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const formData = reactive({
|
||||
competencyType: "",
|
||||
competencyName: "",
|
||||
|
|
@ -28,8 +34,26 @@ const formData = reactive({
|
|||
],
|
||||
});
|
||||
|
||||
function ocClickAdd() {
|
||||
// if (formData.levels.length !== 6) {
|
||||
function fetchDetail() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiCapacity + `/${competencyId.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.competencyType = data.type;
|
||||
formData.competencyName = data.name;
|
||||
formData.definition = data.description;
|
||||
formData.levels = data.capacityDetails;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onClickAddLevels() {
|
||||
const levelName = formData.levels.length + 1;
|
||||
const data = {
|
||||
level: levelName.toString(),
|
||||
|
|
@ -37,31 +61,44 @@ function ocClickAdd() {
|
|||
};
|
||||
formData.levels.push(data);
|
||||
formData.levels[formData.levels.length].level = levelName.toString();
|
||||
// }
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
const body = {
|
||||
competencyType: store.competencyType,
|
||||
competencyName: formData.competencyName,
|
||||
definition: formData.definition,
|
||||
levels: formData.levels,
|
||||
dialogConfirm($q, async () => {
|
||||
const formBody = {
|
||||
type: store.competencyType,
|
||||
name: formData.competencyName,
|
||||
description: formData.definition,
|
||||
capacityDetails: formData.levels,
|
||||
};
|
||||
// showLoader()
|
||||
// http
|
||||
// .put(config.API.???,body)
|
||||
// .then((res)=>{
|
||||
// success($q,'บันทึกสำเร็จ')
|
||||
// router.push(`/KPI-competency`)
|
||||
// }).catch((e)=>{
|
||||
// messageError($q,e)
|
||||
// }).finally(()=>{
|
||||
// hideLoader()
|
||||
// })
|
||||
console.log(body);
|
||||
try {
|
||||
const url = competencyId.value
|
||||
? config.API.kpiCapacity + `/${competencyId.value}`
|
||||
: config.API.kpiCapacity;
|
||||
const method = competencyId.value ? "put" : "post";
|
||||
await http[method](url, formBody);
|
||||
if (!competencyId.value) {
|
||||
router.push(`/KPI-competency`);
|
||||
} else {
|
||||
fetchDetail();
|
||||
}
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onDeleteLevels(index: number) {
|
||||
formData.levels.splice(index, 1);
|
||||
}
|
||||
onMounted(() => {
|
||||
if (competencyId.value) {
|
||||
fetchDetail();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -137,7 +174,7 @@ function onSubmit() {
|
|||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="ocClickAdd"
|
||||
@click="onClickAddLevels"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip></q-btn
|
||||
>
|
||||
|
|
@ -172,49 +209,62 @@ function onSubmit() {
|
|||
/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.levels[index].description"
|
||||
label-slot
|
||||
borderless
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
|
||||
]"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-11">
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.levels[index].description"
|
||||
:dense="$q.screen.lt.md"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
[
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'underline',
|
||||
'subscript',
|
||||
'superscript',
|
||||
],
|
||||
|
||||
['unordered', 'ordered'],
|
||||
label-slot
|
||||
borderless
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
|
||||
]"
|
||||
:fonts="{
|
||||
arial: 'Arial',
|
||||
arial_black: 'Arial Black',
|
||||
comic_sans: 'Comic Sans MS',
|
||||
courier_new: 'Courier New',
|
||||
impact: 'Impact',
|
||||
lucida_grande: 'Lucida Grande',
|
||||
times_new_roman: 'Times New Roman',
|
||||
verdana: 'Verdana',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
v-model="formData.levels[index].description"
|
||||
:dense="$q.screen.lt.md"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
[
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'underline',
|
||||
'subscript',
|
||||
'superscript',
|
||||
],
|
||||
|
||||
['unordered', 'ordered'],
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div class="col-1 text-center">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click="onDeleteLevels(index)"
|
||||
v-if="
|
||||
(store.competencyType === 'HEAD' && index > 4) ||
|
||||
(store.competencyType === 'GROUP' && index > 4) ||
|
||||
store.competencyType === 'EXECUTIVE' ||
|
||||
store.competencyType === 'DIRECTOR' ||
|
||||
store.competencyType === 'INSPECTOR'
|
||||
"
|
||||
>
|
||||
<q-tooltip>ลบ</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue