hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ต่อ Api insignia

Browse source
This commit is contained in:
AnandaTon 2023-08-04 17:56:16 +07:00
parent 9912185b45
commit 209f0a5fa7
3 changed files with 367 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/api/07_insignia/api.insignia.ts
View file

@ -2,5 +2,11 @@
* api เครื่องราชอิสริยาภรณ์ * api เครื่องราชอิสริยาภรณ์
*/ */
import env from "../index"; import env from "../index";
const insignia = `${env.API_URI}/insignia`;
export default {}; export default {
getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
RoundInsignia: (id: string) => `${insignia}/period/${id}`,
docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
};

423
src/modules/07_insignia/components/1_Proposals/addProposals.vue
View file

@ -13,163 +13,304 @@
/> />
<div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div> <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
</div> </div>
<div class="col-12"> <q-form ref="myForm">
<q-card bordered> <div class="col-12">
<div class="col-12 row q-col-gutter-md q-pa-md"> <q-card bordered>
<div class="col-xs-12 col-sm-12 row"> <div class="col-12 row q-col-gutter-md q-pa-md">
<q-separator /> <div class="col-xs-12 col-sm-12 row">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <q-separator />
<q-input <div class="col-12 row q-pa-sm q-col-gutter-sm">
class="col-10" <q-input
dense class="col-10"
outlined dense
v-model="roundInsig" outlined
label="รอบการเสนอขอพระราชทานเครื่องราชฯ" v-model="roundInsig"
/> label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
<q-input />
class="col-2" <q-input
dense class="col-2"
outlined dense
v-model="year" outlined
label="ปีที่เสนอ" v-model="year"
/> label="ปีที่เสนอ"
<datepicker />
menu-class-name="modalfix" <datepicker
v-model="dateStart" menu-class-name="modalfix"
:locale="'th'" v-model="dateStart"
autoApply :locale="'th'"
class="col-xs-12 col-sm-5" autoApply
borderless class="col-xs-12 col-sm-5"
:enableTimePicker="false" borderless
week-start="0" :enableTimePicker="false"
> week-start="0"
<template #year="{ year }"> >
{{ year + 543 }} <template #year="{ year }">
</template> {{ year + 543 }}
<template #year-overlay-value="{ value }"> </template>
{{ parseInt(value + 543) }} <template #year-overlay-value="{ value }">
</template> {{ parseInt(value + 543) }}
<template #trigger> </template>
<q-input <template #trigger>
outlined <q-input
dense outlined
class="col-xs-12 col-sm-5" dense
:model-value=" class="col-xs-12 col-sm-5"
dateStart != null ? date2Thai(dateStart) : null :model-value="
" dateStart != null ? date2Thai(dateStart) : null
:label="`${'วันเริ่มต้น'}`" "
:rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]" :label="`${'วันเริ่มต้น'}`"
> :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
<template v-slot:prepend> >
<q-icon <template v-slot:prepend>
name="event" <q-icon
class="cursor-pointer" name="event"
style="color: var(--q-primary)" class="cursor-pointer"
> style="color: var(--q-primary)"
</q-icon> >
</template> </q-icon>
</q-input> </template>
</template> </q-input>
</datepicker> </template>
<datepicker </datepicker>
menu-class-name="modalfix" <datepicker
v-model="dateEnd" menu-class-name="modalfix"
class="col-xs-12 col-sm-5" v-model="dateEnd"
:locale="'th'" class="col-xs-12 col-sm-5"
autoApply :locale="'th'"
borderless autoApply
:enableTimePicker="false" borderless
week-start="0" :enableTimePicker="false"
> week-start="0"
<template #year="{ year }"> >
{{ year + 543 }} <template #year="{ year }">
</template> {{ year + 543 }}
<template #year-overlay-value="{ value }"> </template>
{{ parseInt(value + 543) }} <template #year-overlay-value="{ value }">
</template> {{ parseInt(value + 543) }}
<template #trigger> </template>
<q-input <template #trigger>
outlined <q-input
dense outlined
class="col-xs-12 col-sm-4" dense
:model-value="dateEnd != null ? date2Thai(dateEnd) : null" class="col-xs-12 col-sm-4"
:label="`${'วันสิ้นสุด'}`" :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
:rules="[ :label="`${'วันสิ้นสุด'}`"
(val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`, :rules="[
]" (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
> ]"
<template v-slot:prepend> >
<q-icon <template v-slot:prepend>
name="event" <q-icon
class="cursor-pointer" name="event"
style="color: var(--q-primary)" class="cursor-pointer"
> style="color: var(--q-primary)"
</q-icon> >
</template> </q-icon>
</q-input> </template>
</template> </q-input>
</datepicker> </template>
</datepicker>
<q-input <q-input
class="col-xs-12 col-sm-2" class="col-xs-12 col-sm-2"
dense dense
outlined outlined
v-model="datelast" v-model="datelast"
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด" label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
/> />
<q-file <q-file
class="col-xs-12 col-sm-10" class="col-xs-12 col-sm-10"
outlined outlined
dense dense
v-model="files" v-model="files"
label="อัปโหลดเอกสารประกอบ" @added="fileUploadDoc"
hide-bottom-space label="อัปโหลดเอกสารประกอบ"
lazy-rules hide-bottom-space
:rules="[ lazy-rules
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน', :rules="[
]" (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
> ]"
<template v-slot:prepend> >
<q-icon name="attach_file" /> <template v-slot:prepend>
</template> <q-icon name="attach_file" />
</q-file> </template>
</q-file>
</div>
</div> </div>
</div> </div>
</div> <q-separator />
<q-separator /> <q-separator />
<q-separator /> <div class="row col-12 q-pa-sm">
<div class="row col-12 q-pa-sm"> <q-space />
<q-space /> <q-btn
<q-btn unelevated
unelevated dense
dense class="q-px-md items-center"
class="q-px-md items-center" color="light-blue-10"
color="light-blue-10" label="บันทึก"
label="บันทึก" @click="checkSave"
@click="router.go(-1)" />
/> </div>
</div> </q-card>
</q-card> </div>
</div> </q-form>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { ref } from "vue"; import { ref, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar, QForm } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai } = mixin; const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const router = useRouter(); const router = useRouter();
const $q = useQuasar(); const $q = useQuasar();
const id = ref<string>("");
const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const dateStart = ref<any>(new Date()); const dateStart = ref<any>(new Date());
const dateEnd = ref<any>(new Date()); const dateEnd = ref<any>(new Date());
const files = ref<any[]>([]);
const fileDocDataUpload = ref<File[]>([]);
const roundInsig = ref<string>(""); const roundInsig = ref<string>("");
const year = ref<string>(""); const yearOffer = ref<number>(0);
const datelast = ref<string>(""); const datelast = ref<number>(0);
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.getRoundInsignia("insignia"))
.then((res) => {
const data = res.data.result.periods;
const files = res.data.result.files;
id.value = data.id;
roundInsig.value = data.period_name;
yearOffer.value = data.year;
datelast.value = data.amount;
dateStart.value = data.startDate;
dateEnd.value = data.endDate;
files.value = files;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const routeName = router.currentRoute.value.name; const routeName = router.currentRoute.value.name;
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
const uploadDocData = async () => {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.docRoundInsignia(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
});
} else {
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
}
};
const editData = async (id: string) => {
showLoader();
await http
.put(config.API.editRoundInsignia(id))
.then(async () => {
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const checkSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
}
}
});
}
};
// const sendData = () => {
// const valueData: any = {
// Name: roundInsig.value,
// year: year.value,
// Amount: datelast.value,
// dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
// dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
// };
// return valueData;
// };
const addData = async () => {
const formData = new FormData();
formData.append("Name", roundInsig.value);
formData.append("year", parseInt(yearOffer.value).toString());
formData.append("Amount", files.datelast);
if (dateStart.value !== null) {
formData.append("StartDate", dateToISO(dateStart.value));
}
if (dateEnd.value !== null) {
formData.append("EndDate", dateToISO(dateEnd.value));
}
showLoader();
await http
.post(config.API.listRoundInsignia("insignia"), formData)
.then(async (res) => {
const data = res.data.result;
id.value = data.id;
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const clickBack = () => {
router.push({ name: "insigniaProposals" });
};
</script> </script>

79
src/modules/07_insignia/components/1_Proposals/listProposals.vue
View file

@ -171,12 +171,29 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import router from "@/router"; import router from "@/router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts"; import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
import { useRoute } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
statusLeave,
dialogMessage,
dateToISO,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const $q = useQuasar(); //ใช้ noti quasar const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const pagination = ref({ const pagination = ref({
@ -205,6 +222,8 @@ const columns = ref<QTableProps["columns"]>([
field: "no", field: "no",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "year", name: "year",
@ -214,6 +233,8 @@ const columns = ref<QTableProps["columns"]>([
field: "name", field: "name",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "startDate", name: "startDate",
@ -223,6 +244,8 @@ const columns = ref<QTableProps["columns"]>([
field: "position", field: "position",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "endDate", name: "endDate",
@ -232,6 +255,8 @@ const columns = ref<QTableProps["columns"]>([
field: "level", field: "level",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "status", name: "status",
@ -241,6 +266,8 @@ const columns = ref<QTableProps["columns"]>([
field: "institution", field: "institution",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "statusRoyal", name: "statusRoyal",
@ -250,6 +277,8 @@ const columns = ref<QTableProps["columns"]>([
field: "institution", field: "institution",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
@ -297,6 +326,38 @@ const rows = ref<FormProprsalsRound[]>([
}, },
]); ]);
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
rows.value = [];
showLoader();
await http
.get(config.API.listRoundInsignia("insignia"))
.then((res) => {
const data = res.data.result;
console.log(data);
data.map((e: any) => {
rows.value.push({
id: e.period_id,
round: e.period_name,
year: e.period_year,
startDate:
e.startDate == null ? null : date2Thai(new Date(e.startDate)),
endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
status: e.period_status,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
// หัวตาราง2 // หัวตาราง2
const clickDelete = (id: string) => { const clickDelete = (id: string) => {
$q.dialog({ $q.dialog({
@ -308,7 +369,21 @@ const clickDelete = (id: string) => {
}, },
persistent: true, persistent: true,
}) })
.onOk(async () => {}) .onOk(async () => {
showLoader();
await http
.delete(config.API.RoundInsignia(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}); .onDismiss(() => {});
}; };