ต่อ API รอปรับ UI

This commit is contained in:
STW_TTTY\stwtt 2024-10-01 11:57:26 +07:00
parent 8662e7eabb
commit 21687e3714
4 changed files with 232 additions and 149 deletions

View file

@ -2,6 +2,7 @@ import env from "./index";
const development = `${env.API_URI}/development`;
const urlFile = `${env.API_URI}/salary`;
const orgProfile = `${env.API_URI}/org/profile`;
export default {
// portfolio
@ -12,4 +13,7 @@ export default {
`${urlFile}/file/${name}/${group}/${id}`,
fileByFile: (name: string, group: string, id: string, fileName: string) =>
`${urlFile}/file/${name}/${group}/${id}/${fileName}`,
developmentRequest:`${orgProfile}/development-request`
};

View file

@ -1,7 +1,10 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { reactive, ref, computed, watch } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store";
@ -18,9 +21,33 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true }); //, popup
const isEdit = defineModel<boolean>("isEdit", { required: true }); //, popup
const idRow = defineModel<string>("idRow", { required: true }); //, popup
const isReadOnly = ref<boolean>(false);
const props = defineProps({
getData: Function,
});
/** เช็ค true/false 70*/
const isDevelopment70 = computed(() => {
return itemsDevelopmentAction.value.some((txt) =>
formData.development.includes(txt.value)
);
});
/** เช็ค true/false 20*/
const isDevelopment20 = computed(() => {
return itemsDevelopmentPerson.value.some((txt) =>
formData.development.includes(txt.value)
);
});
/** เช็ค true/false 10*/
const isDevelopment10 = computed(() => {
return itemsDevelopmentTraining.value.some((txt) =>
formData.development.includes(txt.value)
);
});
const formData = reactive<FormDataIDP>({
topic: "",
development: [],
@ -119,10 +146,84 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
function onSubmit() {
dialogConfirm($q, () => {
console.log(formData);
showLoader();
const body = {
name: formData.topic,
developmentTarget: formData.developmentTarget,
developmentResults: formData.developmentResults,
developmentReport: formData.developmentReport,
reasonDevelopment70: formData.otherAction,
reasonDevelopment20: formData.otherPerson,
reasonDevelopment10: formData.otherTraining,
isDevelopment70: isDevelopment70.value,
isDevelopment20: isDevelopment20.value,
isDevelopment10: isDevelopment10.value,
developmentProjects: formData.development,
};
http
.post(config.API.developmentRequest, body)
.then(async (res) => {
await createURLUpload(res.data.result, formData.document);
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {});
});
}
/**
* function สราง URL ปโหลไฟลเอกสารหลกฐาน
*/
async function createURLUpload(id: string, file: any) {
const fileName = { fileName: file.name };
await http
.post(
config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id),
{
replace: false,
fileList: fileName,
}
)
.then(async (res) => {
const foundKey: string | undefined = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey &&
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
}
/**
* function สำหรบอพโหลดไฟลเอกสารหลกฐาน
*/
async function uploadFileDoc(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(async (res) => {
success($q, `บันทึกข้อมูลสำเร็จ`);
closeDialog();
await props.getData?.();
hideLoader();
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {});
}
/**
* function popup
*/
@ -137,6 +238,9 @@ function closeDialog() {
formData.developmentResults = "";
formData.developmentReport = "";
formData.document = null;
isEdit.value = false;
idRow.value = "";
}
/**
@ -149,6 +253,36 @@ function classInput(val: boolean) {
"full-width cursor-pointer inputgreen": !val,
};
}
function getDetail() {
showLoader();
http
.get(config.API.developmentRequest + `/user/${idRow.value}`)
.then((res) => {
const data = res.data.result;
formData.topic = data.name;
formData.developmentTarget = data.developmentTarget;
formData.developmentResults = data.developmentResults;
formData.developmentReport = data.developmentReport;
formData.otherAction = data.reasonDevelopment70;
formData.otherPerson = data.reasonDevelopment20;
formData.otherTraining = data.reasonDevelopment10;
formData.development = data.developmentProjects;
}).catch((e)=>{
messageError($q,e)
}).finally(()=>{
hideLoader()
})
}
watch(
() => modal.value,
() => {
if (idRow.value) {
getDetail();
}
}
);
</script>
<template>
@ -156,7 +290,11 @@ function classInput(val: boolean) {
<q-card style="min-width: 90vw">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
tittle="ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
:tittle="
isEdit
? 'รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
: 'ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
"
:close="closeDialog"
/>
<q-separator />
@ -292,6 +430,7 @@ function classInput(val: boolean) {
label="เป้าหมายการนำไปพัฒนางาน"
dense
type="textarea"
class="inputgreen"
/>
</div>
@ -303,6 +442,7 @@ function classInput(val: boolean) {
label="วิธีการวัดผลการพัฒนา"
dense
type="textarea"
class="inputgreen"
/>
</div>
@ -314,6 +454,7 @@ function classInput(val: boolean) {
label="รายงานผลการพัฒนา"
dense
type="textarea"
class="inputgreen"
/>
</div>
<div class="col-12">

View file

@ -6,7 +6,7 @@ export const useIndividualDevelopmentPlan = defineStore(
"individualDevelopmentPlan",
() => {
const optionStatus = ref<DataOption[]>([
{ id: "", name: "ทั้งหมด" },
{ id: "ALL", name: "ทั้งหมด" },
{ id: "PENDING", name: "รอดำเนินการ" },
{ id: "COMPLETE", name: "ดำเนินการแก้ไขแล้ว" },
{ id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },

View file

@ -18,9 +18,11 @@ const mixin = useCounterMixin();
const store = useIndividualDevelopmentPlan();
const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
const idRow = ref<string>("");
const isEdit = ref<boolean>(false);
const modalAdd = ref<boolean>(false); // dialog #Add
const filterKeyword = ref<string>("");
const status = ref<string>(""); //
const status = ref<string>("ALL"); //
const statusOptions = ref<DataOption[]>(store.optionStatus);
/** pagination */
@ -38,9 +40,9 @@ const visibleColumns = ref<string[]>([
"no",
"name",
"developmentProjects",
"target",
"developmentTarget",
"developmentResults",
"point",
"developmentReport",
"topic",
"detail",
"document",
@ -80,11 +82,11 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "target",
name: "developmentTarget",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: true,
field: "target",
field: "developmentTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -102,11 +104,11 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
name: "developmentReport",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: true,
field: "point",
field: "developmentReport",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -161,7 +163,7 @@ function filterOption(val: string, update: Function) {
* function เคลยรอมลสถานะคำรอง
*/
function clearStatus() {
status.value = "";
status.value = "ALL";
statusOptions.value = store.optionStatus;
}
@ -172,100 +174,39 @@ function openAdd() {
function onDelete(id: string) {
dialogRemove($q, async () => {
// await http
// .delete(config.API.path(id))
// .then(async (res) => {
// success($q, "");
// await getListData();
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {});
await http
.delete(config.API.developmentRequest + `/${id}`)
.then(async (res) => {
success($q, "ลบข้อมูลสำเร็จ");
await getListData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
});
}
/** list รายการ */
async function getListData() {
// showLoader();
// await http
// .get(
// config.API.path +
// `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}
// `
// )
// .then(async (res) => {
// const data = await res.data.result.data;
// const dataTotal = await res.data.result.total;
// totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
// total.value = dataTotal;
// rows.value = data;
/** จำลอง */
rows.value = [
{
id: "01c73dc6-f716-4518-883b-289587cf91d7",
createdAt: "2024-08-27T01:20:44.960Z",
createdUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
lastUpdatedAt: "2024-08-27T03:41:09.440Z",
lastUpdateUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
createdFullName: "นันทนา ศรีพัฒน์",
lastUpdateFullName: "นันทนา ศรีพัฒน์",
profileId: "08dc4c98-8739-401f-8180-65a982ee4237",
profileEmployeeId: null,
name: "พัฒนาด้านการสื่อสาร",
target: "สื่อสารได้ดีมากขึ้น",
summary: 10,
point: 10,
achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
achievement5:
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
achievement0: "ไม่ได้ดำเนินการพัฒนา",
isDevelopment70: true,
isDevelopment20: true,
isDevelopment10: true,
reasonDevelopment70: "",
reasonDevelopment20: "",
reasonDevelopment10: "",
kpiDevelopmentId: "1cddfbd8-9264-4720-a985-0a6500b8e8aa",
status: "PENDING",
remark: "เปลี่ยนรูปภาพแล้ว",
},
{
id: "f0ad722f-5915-4292-b4f4-9d9c9c891cb5",
createdAt: "2024-08-27T01:20:45.958Z",
createdUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
lastUpdatedAt: "2024-08-27T03:41:09.398Z",
lastUpdateUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
createdFullName: "นันทนา ศรีพัฒน์",
lastUpdateFullName: "นันทนา ศรีพัฒน์",
profileId: "08dc4c98-8739-401f-8180-65a982ee4237",
profileEmployeeId: null,
name: "พัฒนาด้านการทำงานเป็นทีม",
target: "ทำงานเป็นทีมได้ดีขึ้น",
summary: 10,
point: 10,
achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
achievement5:
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
achievement0: "ไม่ได้ดำเนินการพัฒนา",
isDevelopment70: true,
isDevelopment20: true,
isDevelopment10: true,
reasonDevelopment70: "บรรยาย",
reasonDevelopment20: "",
reasonDevelopment10: "",
kpiDevelopmentId: "86ea3b48-96c4-494c-a180-5c315b4c4f85",
status: "COMPLETE",
remark: "เปลี่ยนรูปภาพแล้ว",
},
];
// hideLoader();
// })
// .catch((e) => {
// hideLoader();
// })
// .finally(() => {});
showLoader();
await http
.get(
config.API.developmentRequest +
`/user?status=${status.value}&keyword=${filterKeyword.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}
`
)
.then(async (res) => {
const data = await res.data.result.data;
const dataTotal = await res.data.result.total;
totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
total.value = dataTotal;
rows.value = data;
hideLoader();
})
.catch((e) => {
hideLoader();
})
.finally(() => {});
}
/**
@ -275,19 +216,10 @@ async function getListData() {
function onDownloadFile(id: string) {
showLoader();
http
.get(
config.API.file(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
"eecb1cd9-4c55-4e73-ba52-36fce07ef18d"
)
)
.get(config.API.file("IDP", "ยื่นคำร้องขอแก้ไขข้อมูล", id))
.then((res) => {
if (res.data.length !== 0) {
downloadUrl(
"eecb1cd9-4c55-4e73-ba52-36fce07ef18d",
res.data[0].fileName
);
downloadUrl(id, res.data[0].fileName);
} else {
hideLoader();
}
@ -307,8 +239,8 @@ function downloadUrl(id: string, fileName: string) {
http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
"IDP",
"ยื่นคำร้องขอแก้ไขข้อมูล",
id,
fileName
)
@ -330,6 +262,16 @@ function updatePagination(newPagination: any) {
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
/**
* งช เปดรายละเอยด
* @param id id row
*/
function onDetail(id: string) {
modalAdd.value = true;
isEdit.value = true;
idRow.value = id;
}
watch(
() => pagination.value.rowsPerPage,
async () => {
@ -374,8 +316,6 @@ onMounted(async () => {
:options="statusOptions"
style="width: 250px"
@update:model-value="getListData()"
:clearable="status !== ''"
@clear="clearStatus"
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn
) "
@ -386,8 +326,15 @@ onMounted(async () => {
ไมอม
</q-item-section>
</q-item>
</template></q-select
>
</template>
<template v-if="status !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = 'ALL'), getListData()"
class="cursor-pointer"
/>
</template>
</q-select>
<q-btn dense round flat icon="add" color="primary" @click="openAdd">
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
@ -396,12 +343,20 @@ onMounted(async () => {
<q-input
v-model="filterKeyword"
outlined
clearable
dense
label="ค้นหา"
@keydown.enter="getListData()"
style="width: 200px"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="(filterKeyword = ''), getListData()"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
@ -447,7 +402,10 @@ onMounted(async () => {
v-for="col in props.cols"
:key="col.name"
:props="props"
class="vertical-top"
class="vertical-top cursor-pointer"
@click="
col.name === 'document' ? '' : onDetail(props.row.id)
"
>
<div v-if="col.name == 'no'">
{{
@ -470,7 +428,7 @@ onMounted(async () => {
</q-btn>
</div>
<div v-else-if="col.name == 'developmentProjects'">
<div class="column">
<div class="column no-pointer-events">
<q-checkbox
size="xs"
:model-value="props.row.isDevelopment70"
@ -488,31 +446,6 @@ onMounted(async () => {
/>
</div>
</div>
<div v-else-if="col.name == 'developmentResults'">
<div class="column">
<span>
{{
props.row.achievement10
? `- ${props.row.achievement10} (10)`
: ""
}}
</span>
<span>
{{
props.row.achievement5
? `- ${props.row.achievement5} (5)`
: ""
}}
</span>
<span>
{{
props.row.achievement0
? `- ${props.row.achievement10} (0)`
: ""
}}
</span>
</div>
</div>
<div v-else class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
@ -556,6 +489,11 @@ onMounted(async () => {
</div>
</div>
<DialogDevelop v-model:modal="modalAdd" />
<DialogDevelop
v-model:modal="modalAdd"
:get-data="getListData"
v-model:is-edit="isEdit"
v-model:id-row="idRow"
/>
</template>
<style scoped lang="scss"></style>