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

Merge branch 'anandadev' into develop

Browse source
This commit is contained in:
AnandaTon 2023-08-08 21:38:46 +07:00
commit 8b173d4f00
7 changed files with 1306 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,5 +2,10 @@
* api เครื่องราชอิสริยาภรณ์
*/
import env from "../index";
export default {};
const insignia = `${env.API_URI}/insignia`;
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}`,
};

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

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

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

@ -84,30 +84,36 @@
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="round" :props="props">
<q-td key="round" :props="props" @click="clickEdit(props.row)">
{{ props.row.round }}
</q-td>
<q-td key="year" :props="props">
<q-td key="year" :props="props" @click="clickEdit(props.row)">
{{ props.row.year }}
</q-td>
<q-td key="startDate" :props="props">
<q-td
key="startDate"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.startDate }}
</q-td>
<q-td key="endDate" :props="props">
<q-td key="endDate" :props="props" @click="clickEdit(props.row)">
{{ props.row.endDate }}
</q-td>
<q-td key="status" :props="props">
<q-td key="status" :props="props" @click="clickEdit(props.row)">
<q-icon
v-if="props.row.status == 'ยังไม่ได้เสนอ'"
name="mdi-close"
color="grey-5"
class="text-h5"
@click="clickEdit(props.row)"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
@click="clickEdit(props.row)"
/>
</q-td>
<q-td key="statusRoyal" :props="props">
@ -116,12 +122,14 @@
name="mdi-timer-sand"
color="orange"
class="text-h5"
@click="clickEdit(props.row)"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
@click="clickEdit(props.row)"
/>
</q-td>
<q-td auto-width>
@ -171,12 +179,29 @@
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
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 modal = ref<boolean>(false);
const pagination = ref({
@ -205,6 +230,8 @@ const columns = ref<QTableProps["columns"]>([
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "year",
@ -214,6 +241,8 @@ const columns = ref<QTableProps["columns"]>([
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
@ -223,6 +252,8 @@ const columns = ref<QTableProps["columns"]>([
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
@ -232,6 +263,8 @@ const columns = ref<QTableProps["columns"]>([
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
@ -241,6 +274,8 @@ const columns = ref<QTableProps["columns"]>([
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "statusRoyal",
@ -250,6 +285,8 @@ const columns = ref<QTableProps["columns"]>([
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
@ -284,7 +321,7 @@ const rows = ref<FormProprsalsRound[]>([
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "ยังไม่ได้เสนอ",
status: "ไม่ใช้งาน",
statusRoyal: "ยังไม่ได้เสนอ",
},
{
@ -297,6 +334,44 @@ 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,
amount: e.period_amount,
startDate:
e.period_start == null ? null : date2Thai(new Date(e.period_start)),
endDate:
e.period_end == null ? null : date2Thai(new Date(e.period_end)),
status: e.period_status,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickEdit = (col: any) => {
router.push(`/insignia/round-add/${col.id}`);
};
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
@ -308,7 +383,21 @@ const clickDelete = (id: string) => {
},
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(() => {})
.onDismiss(() => {});
};
@ -317,6 +406,10 @@ const clickAdd = () => {
router.push({ name: "roundAdd" });
};
const clickProposals = (id: string) => {
// window.open(config.API.exportInsigniaDoc(id));
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);

10
src/modules/07_insignia/router.ts
View file

@ -45,6 +45,16 @@ export default [
Role: "insignia",
},
},
{
path: "/insignia/round-add/:id",
name: "roundAddEdit",
component: roundAdd,
meta: {
Auth: true,
Key: [8.1],
Role: "insignia",
},
},
{
path: "/insignia/round-add",
name: "roundAdd",

368
src/modules/09_coin/components/1_Proposals/addProposals.vue Normal file
View file

@ -0,0 +1,368 @@
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="clickBack"
/>
{{
edit
? "ระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
: "เพิ่มระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
}}
</div>
<q-form ref="myForm">
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12 row">
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-10"
dense
outlined
v-model="roundCoin"
label="รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา"
/>
<datepicker
menu-class-name="modalfix"
v-model="yearly"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="updateYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="yearly + 543"
:rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
:label="`${'ปีที่เสนอ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="dateStart"
:locale="'th'"
autoApply
class="col-xs-12 col-sm-5"
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateStart != null ? date2Thai(dateStart) : null
"
:label="`${'วันเริ่มต้น'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="dateEnd"
class="col-xs-12 col-sm-5"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="col-xs-12 col-sm-4"
:model-value="dateEnd != null ? date2Thai(dateEnd) : null"
:label="`${'วันสิ้นสุด'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-xs-12 col-sm-2"
dense
outlined
v-model="datelast"
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
/>
<q-file
class="col-xs-12 col-sm-10"
outlined
dense
v-model="files"
@added="fileUploadDoc"
label="อัปโหลดเอกสารประกอบ"
hide-bottom-space
lazy-rules
:rules="[
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
]"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</div>
</div>
<q-separator />
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="checkSave"
/>
</div>
</q-card>
</div>
</q-form>
</div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const dateStart = ref<Date>(new Date());
const dateEnd = ref<Date>(new Date());
const yearly = ref<number>(new Date().getFullYear());
const files = ref<any>();
const fileDocDataUpload = ref<File[]>([]);
const roundCoin = ref<string>("");
const datelast = ref<number>(1);
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (route.params.id) {
edit.value = true;
showLoader();
console.log(id.value);
await http
.get(config.API.getRoundInsignia(id.value))
.then((res) => {
const data = res.data.result;
// const files = res.data.result.files;
id.value = data.period_id;
roundCoin.value = data.period_name;
yearly.value = data.period_year;
datelast.value = data.period_amount;
dateStart.value = new Date(data.period_start);
dateEnd.value = new Date(data.period_end);
files.value = data.period_doc;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const routeName = router.currentRoute.value.name;
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
const updateYear = async (e: number) => {
yearly.value = e;
};
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.RoundInsignia(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) => {
const formData = new FormData();
formData.append("Name", roundCoin.value);
formData.append("year", parseInt(yearly.value).toString());
formData.append("amount", datelast.value.toString());
if (dateStart.value !== null) {
formData.append("startDate", dateToISO(dateStart.value));
}
if (dateEnd.value !== null) {
formData.append("endDate", dateToISO(dateEnd.value));
}
formData.append("file", files.value);
console.log(formData);
showLoader();
await http
.put(config.API.editRoundInsignia(id))
.then(async () => {
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
console.log(formData);
};
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", roundCoin.value);
formData.append("year", parseInt(yearly.value).toString());
formData.append("amount", datelast.value.toString());
if (dateStart.value !== null) {
formData.append("startDate", dateToISO(dateStart.value));
}
if (dateEnd.value !== null) {
formData.append("endDate", dateToISO(dateEnd.value));
}
// formData.append("file", files.value[0]);
// console.log(formData);
formData.append("file", files.value);
showLoader();
await http
.post(config.API.listRoundInsignia("coin"), formData)
.then(async (res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
clickBack();
});
};
const clickBack = () => {
router.push({ name: "coinProposals" });
};
</script>

468
src/modules/09_coin/components/1_Proposals/listProposals.vue Normal file
View file

@ -0,0 +1,468 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการรอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="round" :props="props" @click="clickEdit(props.row)">
{{ props.row.round }}
</q-td>
<q-td key="year" :props="props" @click="clickEdit(props.row)">
{{ props.row.year }}
</q-td>
<q-td
key="startDate"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.startDate }}
</q-td>
<q-td key="endDate" :props="props" @click="clickEdit(props.row)">
{{ props.row.endDate }}
</q-td>
<q-td key="status" :props="props" @click="clickEdit(props.row)">
<q-icon
v-if="props.row.status == 'ยังไม่ได้เสนอ'"
name="mdi-close"
color="grey-5"
class="text-h5"
@click="clickEdit(props.row)"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
@click="clickEdit(props.row)"
/>
</q-td>
<q-td key="statusRoyal" :props="props">
<q-icon
v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
name="mdi-timer-sand"
color="orange"
class="text-h5"
@click="clickEdit(props.row)"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
@click="clickEdit(props.row)"
/>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="light-blue-8"
@click.stop.prevent="clickProposals(props.row.id)"
icon="mdi-file-download"
>
<q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
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 modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"round",
"year",
"startDate",
"endDate",
"status",
"statusRoyal",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "round",
align: "left",
label: "รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "year",
align: "left",
label: "ปีที่เสนอ",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
align: "left",
label: "วันที่เริ่มต้น",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
align: "left",
label: "วันที่สิ้นสุด",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormProprsalsRound[]>([
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "ไม่ใช้งาน",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
]);
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
rows.value = [];
showLoader();
await http
.get(config.API.listRoundInsignia("coin"))
.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,
amount: e.period_amount,
startDate:
e.period_start == null ? null : date2Thai(new Date(e.period_start)),
endDate:
e.period_end == null ? null : date2Thai(new Date(e.period_end)),
status: e.period_status,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickEdit = (col: any) => {
router.push(`/coin/round-add/${col.id}`);
};
const clickProposals = (id: string) => {
// window.open(config.API.exportDisablePassExamList(id));
};
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.RoundInsignia(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push({ name: "coinRoundAdd" });
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

34
src/modules/09_coin/router.ts
View file

@ -4,6 +4,10 @@
const Main = () => import("@/modules/09_coin/views/Main.vue");
const CoinHistory = () => import("@/modules/09_coin/components/Coin.vue");
const coinProposals = () =>
import("@/modules/09_coin/components/1_Proposals/listProposals.vue");
const coinRoundAdd = () =>
import("@/modules/09_coin/components/1_Proposals/addProposals.vue");
export default [
{
@ -16,6 +20,36 @@ export default [
Role: "coin",
},
},
{
path: "/coin/round-proposals",
name: "coinProposals",
component: coinProposals,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/round-add",
name: "coinRoundAdd",
component: coinRoundAdd,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/round-add/:id",
name: "coinRoundEdit",
component: coinRoundAdd,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/history",
name: "coinHistory",