ต่อAPI กลุ่มงาน

This commit is contained in:
oat_dev 2024-04-19 11:36:48 +07:00
parent 974f5d8270
commit 4dfd5a139b
3 changed files with 103 additions and 101 deletions

View file

@ -2,11 +2,13 @@ import env from "../index";
const KPI = `${env.API_URI}/kpi`; const KPI = `${env.API_URI}/kpi`;
const kpiPeriod = `${env.API_URI}/kpi/period`; const kpiPeriod = `${env.API_URI}/kpi/period`;
const kpiEvaluation = `${env.API_URI}/kpi/evaluation`; const kpiEvaluation = `${env.API_URI}/kpi/evaluation`;
const kpiGroup = `${env.API_URI}/kpi/group`;
export default { export default {
KPI, KPI,
/** รอบการประเมินผล*/ /** รอบการประเมินผล*/
kpiPeriod: `${kpiPeriod}`, kpiPeriod: `${kpiPeriod}`,
kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`, kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
kpiEvaluation kpiEvaluation,
kpiGroup,
kpiGroupById: (id: string) => `${kpiGroup}/${id}`
}; };

View file

@ -3,21 +3,19 @@ import { ref, onMounted } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import Header from "@/components/DialogHeader.vue"; import dialogHeader from "@/components/DialogHeader.vue";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main"; import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import type { ResponseObject } from "@/modules/14_KPI/interface/response/KpiGroup";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const router = useRouter(); const rows = ref<ResponseObject[]>([]);
const rows = ref<any>();
const groupName = ref<string>(""); const groupName = ref<string>("");
const editStatus = ref<boolean>(false); const editStatus = ref<boolean>(false);
const editId = ref<string>("");
const competencyTypeOp = ref<DataOption[]>([ const competencyTypeOp = ref<DataOption[]>([
{ {
id: "ID1", id: "ID1",
@ -42,11 +40,11 @@ const competencyTypeOp = ref<DataOption[]>([
]); ]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "groupName", name: "nameGroupKPI",
align: "left", align: "left",
label: "รายการกลุ่มงาน", label: "รายการกลุ่มงาน",
sortable: true, sortable: true,
field: "groupName", field: "nameGroupKPI",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -56,71 +54,81 @@ const columns = ref<QTableProps["columns"]>([
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin; const {
dialogRemove,
const competencyType = ref<string>("ID1"); dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = mixin;
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const visibleColumns = ref<string[]>(["groupName"]); const visibleColumns = ref<string[]>(["nameGroupKPI"]);
/** ดึงข้อมูล */ /** ดึงข้อมูล */
async function getData() { async function fetchData() {
const data = [ showLoader();
{ await http
id: "ID1", .get(config.API.kpiGroup)
groupName: "กลุ่มงาน 1", .then(async (res) => {
}, rows.value = res.data.result.data;
{ })
id: "ID2", .catch((err) => {
groupName: "กลุ่มงาน 2", messageError($q, err);
}, })
]; .finally(() => {
rows.value = data; hideLoader();
// showLoader(); });
// await http }
// .get(config.API.orgPrefix)
// .then(async (res) => { async function addData() {
// }) await http
// .catch((err) => { .post(config.API.kpiGroup, {
// messageError($q, err); nameGroupKPI: groupName.value,
// }) })
// .finally(() => { .then(() => {
// hideLoader(); fetchData();
// }); success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
} }
async function editData(id: string) { async function editData(id: string) {
console.log(id); await http
// await http .put(config.API.kpiGroupById(id), {
// .put(config.API.orgPrefixId(id), { nameGroupKPI: groupName.value,
// name: prefix.value, })
// }) .then(() => {
// .then(() => { fetchData();
// getData(); success($q, "บันทึกข้อมูลสำเร็จ");
// success($q, ""); })
// }) .catch((err) => {
// .catch((err) => { messageError($q, err);
// messageError($q, err); })
// }) .finally(() => {
// .finally(() => { hideLoader();
// hideLoader(); });
// });
} }
async function deleteData(id: string) { async function deleteData(id: string) {
console.log(id); await http
// await http .delete(config.API.kpiGroupById(id))
// .delete(config.API.orgPrefixId(id)) .then(() => {
// .then(() => { fetchData();
// getData(); success($q, "ลบข้อมูลสำเร็จ");
// success($q, ""); })
// }) .catch((err) => {
// .catch((err) => { messageError($q, err);
// messageError($q, err); })
// }) .finally(() => {
// .finally(() => { hideLoader();
// hideLoader();w });
// });
} }
/** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */ /** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
@ -128,42 +136,38 @@ function onAdd() {
modal.value = true; modal.value = true;
} }
function close() { function closeDialog() {
modal.value = false; modal.value = false;
editStatus.value = false; editStatus.value = false;
groupName.value = '' groupName.value = "";
} }
function onEdit(data: any) { function onEdit(data: any) {
modal.value = true; modal.value = true;
editStatus.value = true; editStatus.value = true;
groupName.value = data.groupName groupName.value = data.nameGroupKPI;
editId.value = data.id;
} }
function onSubmit() { async function onSubmit() {
console.log("save"); dialogConfirm(
close() $q,
async () => {
editStatus.value ? editData(editId.value) : addData();
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
} }
onMounted(async () => { onMounted(async () => {
getData(); fetchData();
}); });
</script> </script>
<template> <template>
<q-toolbar style="padding: 0"> <q-toolbar style="padding: 0">
<!-- <q-select
v-model="competencyType"
outlined
label="ประเภทสมรรถนะ"
dense
option-label="name"
option-value="id"
:options="competencyTypeOp"
style="min-width: 200px"
emit-value
map-options
/> -->
<q-btn flat round color="primary" icon="add" @click="onAdd()"> <q-btn flat round color="primary" icon="add" @click="onAdd()">
<q-tooltip> เพมขอม </q-tooltip> <q-tooltip> เพมขอม </q-tooltip>
</q-btn> </q-btn>
@ -210,15 +214,11 @@ onMounted(async () => {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td <q-td v-for="col in props.cols" :key="col.id">
v-for="col in props.cols"
:key="col.id"
@click="onEdit(props.row)"
>
{{ col.value }} {{ col.value }}
</q-td> </q-td>
<q-td auto-width> <q-td auto-width>
<!-- <q-btn <q-btn
color="edit" color="edit"
flat flat
dense dense
@ -227,17 +227,10 @@ onMounted(async () => {
size="12px" size="12px"
icon="edit" icon="edit"
clickable clickable
@click.stop=" @click="onEdit(props.row)"
() => {
dialogStatus = 'edit';
dialog = true;
prefix = props.row.name;
editId = props.row.id;
}
"
> >
<q-tooltip>แกไขขอม</q-tooltip> <q-tooltip>แกไขขอม</q-tooltip>
</q-btn> --> </q-btn>
<q-btn <q-btn
color="red" color="red"
flat flat
@ -261,9 +254,9 @@ onMounted(async () => {
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card flat bordered style="min-width: 50vh"> <q-card flat bordered style="min-width: 50vh">
<q-form greedy @submit.prevent @validation-success="onSubmit"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<Header <dialog-header
:tittle="editStatus ? 'แก้ไขกลุ่มงาน' : 'เพิ่มกลุ่มงาน'" :tittle="editStatus ? 'แก้ไขกลุ่มงาน' : 'เพิ่มกลุ่มงาน'"
:close="close" :close="closeDialog"
/> />
<q-separator /> <q-separator />
<q-card-section> <q-card-section>

View file

@ -0,0 +1,7 @@
//ข้อมูล
interface ResponseObject {
nameGroupKPI: string,
}
export type { ResponseObject };