ต่อAPI กลุ่มงาน
This commit is contained in:
parent
974f5d8270
commit
4dfd5a139b
3 changed files with 103 additions and 101 deletions
|
|
@ -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}`
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
7
src/modules/14_KPI/interface/response/KpiGroup.ts
Normal file
7
src/modules/14_KPI/interface/response/KpiGroup.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
//ข้อมูล
|
||||||
|
interface ResponseObject {
|
||||||
|
nameGroupKPI: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { ResponseObject };
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue