หมายเหตุแนวนอน/ตั้ง

This commit is contained in:
Kittapath 2023-10-08 13:55:16 +07:00
parent 653cd846db
commit acbec63df7
5 changed files with 802 additions and 286 deletions

View file

@ -48,6 +48,13 @@
</q-td>
</q-tr>
</template>
<template #bottom="props">
<div :props="props" class="row col-11 justify-end">
<span class="text-weight-medium text-subtitle2"
>รวมระยะเวลา : <span class="q-pl-sm">{{ total }}</span></span
>
</div>
</template>
</Table>
</q-form>
<!-- popup Edit window-->
@ -317,6 +324,7 @@ const editRow = ref<boolean>(false); //เช็คมีการแก้ไ
const checkValidate = ref<boolean>(false); //validate data
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const total = ref<string>("-");
const rows = ref<any>([]);
const filter = ref<string>(""); //search data table
const { messageError, showLoader, hideLoader } = mixin;
@ -480,12 +488,56 @@ const calDate = async () => {
}${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
};
const calDateSplit = async (startDate: Date, endDate: Date) => {
let _startDate = new Date(startDate.toISOString().substr(0, 10));
let _endDate = new Date(endDate.toISOString().substr(0, 10));
_endDate.setDate(_endDate.getDate() + 1);
if (_startDate > _endDate) {
const swap = _startDate;
_startDate = _endDate;
_endDate = swap;
}
const startYear = _startDate.getFullYear();
const february =
(startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
? 29
: 28;
const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let yearDiff = _endDate.getFullYear() - startYear;
let monthDiff = _endDate.getMonth() - _startDate.getMonth();
if (monthDiff < 0) {
yearDiff--;
monthDiff += 12;
}
let dayDiff = _endDate.getDate() - _startDate.getDate();
if (dayDiff < 0) {
if (monthDiff > 0) {
monthDiff--;
} else {
yearDiff--;
monthDiff = 11;
}
dayDiff += daysInMonth[_startDate.getMonth()];
}
var obj = {
yearDiff: yearDiff,
monthDiff: monthDiff,
dayDiff: dayDiff,
};
return obj;
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateCareer(candidateId.value))
.then((res) => {
const data = res.data.result;
var yearDiff = 0;
var monthDiff = 0;
var dayDiff = 0;
total.value = "-";
rows.value = [];
data.map((r: any) => {
rows.value.push({
@ -493,6 +545,24 @@ const fetchData = async () => {
startDate: new Date(r.durationStart),
endDate: new Date(r.durationEnd),
});
calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
(d) => {
yearDiff = yearDiff + d.yearDiff;
monthDiff = monthDiff + d.monthDiff;
dayDiff = dayDiff + d.dayDiff;
if (dayDiff > 30) {
dayDiff = dayDiff % 30;
monthDiff = monthDiff + parseInt((dayDiff / 30).toString());
}
if (monthDiff > 12) {
monthDiff = monthDiff % 12;
yearDiff = yearDiff + parseInt((monthDiff / 12).toString());
}
total.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
monthDiff > 0 ? monthDiff + " เดือน " : ""
}${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
}
);
});
})
.catch((e) => {

View file

@ -19,8 +19,10 @@ const { messageError, showLoader, hideLoader } = mixin;
const myForm = ref<QForm | null>(null);
// set 1
const question1Desc = ref<string>("เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)")
const question1Score = ref<number>(5)
const question1Desc = ref<string>(
"เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)"
);
const question1Score = ref<number>(5);
const question1Answer = ref<any>([
"ความมั่นคงในการทำงาน",
"สิทธิประโยชน์/สวัสดิการ",
@ -35,21 +37,25 @@ const question1Answer = ref<any>([
"โอกาสความก้าวหน้า",
"การได้รับการยอมรับจากสังคม",
// " ()",
])
]);
// set 2
const question2Desc = ref<string>("สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด")
const question2Score = ref<number>(5)
const question2Desc = ref<string>(
"สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด"
);
const question2Score = ref<number>(5);
const question2Answer = ref<any>([
"น้อยกว่า 2 สัปดาห์",
"1 เดือน - 3 เดือน",
"3 เดือน - 6 เดือน",
"6 เดือนขึ้นไป",
])
]);
// set 3
const question3Desc = ref<string>("ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)")
const question3Score = ref<number>(5)
const question3Desc = ref<string>(
"ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)"
);
const question3Score = ref<number>(5);
const question3Answer = ref<any>([
"อัตราเงินเดือน",
"สวัสดิการ",
@ -66,11 +72,13 @@ const question3Answer = ref<any>([
"การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
"การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
"โอกาสความก้าวหน้า",
])
]);
// set 4
const question4Desc = ref<string>("อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)")
const question4Score = ref<number>(5)
const question4Desc = ref<string>(
"อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)"
);
const question4Score = ref<number>(5);
const question4Answer = ref<any>([
"อัตราเงินเดือน ",
"สวัสดิการ",
@ -87,40 +95,41 @@ const question4Answer = ref<any>([
"การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
"การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
"โอกาสความก้าวหน้า",
])
]);
// set 5
const question5Desc = ref<string>("โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?")
const question5Score = ref<number>(5)
const question5Desc = ref<string>(
"โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?"
);
const question5Score = ref<number>(5);
// set 6
const question6Desc = ref<string>("ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร")
const question6Score = ref<number>(5)
const question6Desc = ref<string>(
"ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร"
);
const question6Score = ref<number>(5);
// set 7
const question7Desc = ref<string>("ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร")
const question7Score = ref<number>(5)
const question7Answer = ref<any>([
"มี (ระบุ)",
"ไม่มี",
])
const question7Desc = ref<string>(
"ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร"
);
const question7Score = ref<number>(5);
const question7Answer = ref<any>(["มี (ระบุ)", "ไม่มี"]);
// set 8
const question8Desc = ref<string>("ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)")
const question8Score = ref<number>(5)
const question8Answer = ref<any>([
"แนะนำ",
"ไม่แนะนำ (ระบุ)",
])
const question8Desc = ref<string>(
"ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
);
const question8Score = ref<number>(5);
const question8Answer = ref<any>(["แนะนำ", "ไม่แนะนำ (ระบุ)"]);
// set 9
const question9Desc = ref<string>("หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)")
const question9Score = ref<number>(5)
const question9Answer = ref<any>([
"อยาก",
"ไม่อยาก (ระบุ)",
])
const question9Desc = ref<string>(
"หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
);
const question9Score = ref<number>(5);
const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
// set 10
const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ")
const question10Score = ref<number>(5)
const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ");
const question10Score = ref<number>(5);
const exitFactor = ref<any>([]);
const reasonWork = ref<any>([]);
@ -212,14 +221,22 @@ const getData = async () => {
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
แกไขคำถาม
</div>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="col-12"><q-separator /></div>
<q-form ref="myForm">
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<q-card bordered flat>
@ -229,24 +246,59 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question1Desc" label="คำถามข้อที่ 1" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
]" />
<q-input
v-model="question1Desc"
label="คำถามข้อที่ 1"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question1Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question1Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question1Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question1Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question1Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question1Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
@ -263,24 +315,59 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question2Desc" label="คำถามข้อที่ 2" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
]" />
<q-input
v-model="question2Desc"
label="คำถามข้อที่ 2"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question2Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question2Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question2Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question2Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question2Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question2Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
@ -297,24 +384,59 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question3Desc" label="คำถามข้อที่ 3" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
]" />
<q-input
v-model="question3Desc"
label="คำถามข้อที่ 3"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question3Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question3Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question3Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question3Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question3Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question3Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
@ -331,24 +453,59 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question4Desc" label="คำถามข้อที่ 4" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
]" />
<q-input
v-model="question4Desc"
label="คำถามข้อที่ 4"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question4Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question4Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question4Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question4Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question4Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question4Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
@ -365,17 +522,38 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question5Desc" label="คำถามข้อที่ 5" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
]" />
<q-input
v-model="question5Desc"
label="คำถามข้อที่ 5"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question5Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question5Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
</div>
</q-card>
@ -391,17 +569,38 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question6Desc" label="คำถามข้อที่ 6" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
]" />
<q-input
v-model="question6Desc"
label="คำถามข้อที่ 6"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question6Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question6Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
</div>
</q-card>
@ -417,24 +616,59 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question7Desc" label="คำถามข้อที่ 7" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
]" />
<q-input
v-model="question7Desc"
label="คำถามข้อที่ 7"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question7Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question7Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question7Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question7Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question7Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question7Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
@ -451,28 +685,62 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question8Desc" label="คำถามข้อที่ 8" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
]" />
<q-input
v-model="question8Desc"
label="คำถามข้อที่ 8"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question8Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question8Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question8Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question8Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question8Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question8Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
</q-card>
</div>
@ -487,28 +755,62 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question9Desc" label="คำถามข้อที่ 9" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
]" />
<q-input
v-model="question9Desc"
label="คำถามข้อที่ 9"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question9Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question9Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
<div v-for="(data, index) in question9Answer" :key="index" class="row col-12">
<div
v-for="(data, index) in question9Answer"
:key="index"
class="row col-12"
>
<div class="col-6">
<q-input v-model="question9Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
autogrow hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question9Answer[index]"
:label="`คำตอบที่ ${index + 1}`"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
]" />
]"
/>
</div>
</div>
</div>
</q-card>
</div>
@ -523,17 +825,38 @@ const getData = async () => {
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-10 text-top0">
<q-input v-model="question10Desc" label="คำถามข้อที่ 10" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
]" />
<q-input
v-model="question10Desc"
label="คำถามข้อที่ 10"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
]"
/>
</div>
<div class="col-2 text-top0">
<q-input v-model="question10Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
hide-bottom-space outlined class="bg-white" :rules="[
<q-input
v-model="question10Score"
label="กรอกคะแนน"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
]" />
]"
/>
</div>
</div>
</q-card>
@ -544,11 +867,8 @@ const getData = async () => {
<q-card-actions class="text-primary q-pa-md">
<q-space />
<q-btn unelevated label="บันทึก" color="public" @click="">
</q-btn>
<q-btn unelevated label="บันทึก" color="public" @click=""> </q-btn>
</q-card-actions>
</q-form>
</q-card>
</template>

View file

@ -22,6 +22,7 @@ const {
dialogConfirm,
dialogRemove,
date2Thai,
dateToISO,
} = mixin;
const myForm = ref<QForm | null>(null);
@ -322,7 +323,8 @@ const uploadFile = async (event: any, signDate: any) => {
const selectedFile = event;
const formdata = new FormData();
formdata.append("file", selectedFile);
formdata.append("signDate", signDate);
if (signDate != null)
formdata.append("signDate", dateToISO(signDate));
await http
.put(
config.API.fileRetirement(retireld.value.toString()),
@ -459,7 +461,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
clickable
v-close-popup
type="a"
@click="modalUpload = true,signDate = null,fileUpload = null"
@click="
(modalUpload = true), (signDate = null), (fileUpload = null)
"
target="_blank"
v-if="statusUpload !== true"
>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref,watch } from "vue";
import { onMounted, ref, watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -11,7 +11,15 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
const $q = useQuasar();
const myForm = ref<any>();
const mixin = useCounterMixin();
const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm ,dateToISO} = mixin;
const {
date2Thai,
showLoader,
success,
hideLoader,
messageError,
dialogConfirm,
dateToISO,
} = mixin;
const files = ref<any>();
const filesReturn = ref<any>();
const OrganazationId = ref<string>("");
@ -20,17 +28,17 @@ const OrgList = ref<DataOption[]>([]);
const OrgList2 = ref<DataOption[]>([]);
const Datereceive = ref<Date | null>();
const Datereturn = ref<Date | null>();
const remark = ref<string>("")
const nullii = ref<any>(null)
const remark = ref<string>("");
const nullii = ref<any>(null);
const props = defineProps({
modal: Boolean,
personId: String,
close: Function,
fecthlistInsignia: Function,
dateCheckReceive:String,
dateCheckReturn:String,
dataModal:Object
})
dateCheckReceive: String,
dateCheckReturn: String,
dataModal: Object,
});
// reset
const clearReceiveDate = () => {
Datereceive.value = null;
@ -40,36 +48,36 @@ const clearReturnDate = () => {
};
const close = () => {
props.close?.();
Datereceive.value = null
files.value = null
OrganazationId.value = ''
Datereturn.value = null
filesReturn.value = null
OrganazationId2.value = ''
Datereceive.value = null;
files.value = null;
OrganazationId.value = "";
Datereturn.value = null;
filesReturn.value = null;
OrganazationId2.value = "";
};
const SaveData = async (type:string,id:string) => {
await myForm.value.validate().then((result: boolean) => {
const SaveData = async (type: string, id: string) => {
await myForm.value.validate().then((result: boolean) => {
if (result) {
dialogConfirm($q,() => dataSave(type,id))
}else{
}
})};
const dataSave = (type:string,id:string) => {
const formData = new FormData();
if(props.dateCheckReceive === null){
formData.append("Date", dateToISO(Datereceive.value ?? nullii));
formData.append("File", files.value);
formData.append("OrgId", OrganazationId.value);
dialogConfirm($q, () => dataSave(type, id));
} else {
formData.append("Date", dateToISO(Datereturn.value ?? nullii));
formData.append("File", filesReturn.value);
formData.append("OrgId", OrganazationId2.value);
}
});
};
const dataSave = (type: string, id: string) => {
const formData = new FormData();
if (props.dateCheckReceive === null) {
formData.append("Date", dateToISO(Datereceive.value ?? nullii));
formData.append("File", files.value);
formData.append("OrgId", OrganazationId.value);
} else {
formData.append("Date", dateToISO(Datereturn.value ?? nullii));
formData.append("File", filesReturn.value);
formData.append("OrgId", OrganazationId2.value);
}
showLoader();
http
.put(config.API.requestinsignia(type,id), formData)
http
.put(config.API.requestinsignia(type, id), formData)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
@ -77,17 +85,17 @@ const dataSave = (type:string,id:string) => {
messageError($q, e);
})
.finally(async () => {
Datereceive.value = null
files.value = null
OrganazationId.value = ''
Datereturn.value = null
filesReturn.value = null
OrganazationId2.value = ''
Datereceive.value = null;
files.value = null;
OrganazationId.value = "";
Datereturn.value = null;
filesReturn.value = null;
OrganazationId2.value = "";
props.close?.();
hideLoader();
props.fecthlistInsignia?.()
props.fecthlistInsignia?.();
});
}
};
const fetchOrgList = async () => {
showLoader();
await http
@ -99,12 +107,12 @@ const fetchOrgList = async () => {
}));
OrgList.value = orgArr;
OrgList2.value = [
{
id: "00000000-0000-0000-0000-000000000000",
name: "สำนักนายกรัฐมนตรี",
},
...orgArr,
];
{
id: "00000000-0000-0000-0000-000000000000",
name: "สำนักนายกรัฐมนตรี",
},
...orgArr,
];
})
.catch((err) => {
messageError($q, err);
@ -113,123 +121,237 @@ const fetchOrgList = async () => {
hideLoader();
});
};
watch(props,()=>{
if(props.dataModal){
Datereceive.value = props.dataModal.dateReceiveInsignia
Datereturn.value = props.dataModal.dateReturnInsignia
OrganazationId.value = props.dataModal.orgReceiveInsignia
OrganazationId2.value = props.dataModal.orgReturnInsignia
watch(props, () => {
if (props.dataModal) {
Datereceive.value = props.dataModal.dateReceiveInsignia;
Datereturn.value = props.dataModal.dateReturnInsignia;
OrganazationId.value = props.dataModal.orgReceiveInsignia;
OrganazationId2.value =
Datereturn.value != null
? props.dataModal.orgReturnInsignia == null ||
props.dataModal.orgReturnInsignia == "-"
? "00000000-0000-0000-0000-000000000000"
: props.dataModal.orgReturnInsignia
: "-";
}
})
});
onMounted(()=>{
fetchOrgList()
})
onMounted(() => {
fetchOrgList();
});
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 900px">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">-นเครองราชฯ</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
<q-toolbar-title class="text-subtitle2 text-bold"
>-นเครองราชฯ</q-toolbar-title
>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md bg-grey-1">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 text-weight-bold text-grey-7">
บเครองราชฯ
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="dateCheckReceive !== null">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : null
" :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="dateCheckReceive !== null">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="dateCheckReceive !== null">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-sm-4">
<q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="dateCheckReceive !== null"/>
</div>
บเครองราชฯ
</div>
<div v-if="dateCheckReceive !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 q-mt-sm"><q-separator/></div>
<div class="col-12 text-weight-bold text-grey-7">
นเครองราชฯ
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="dateCheckReturn !== null">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
hide-bottom-space :model-value="Datereturn != null ? date2Thai(Datereturn) : undefined
" :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="dateCheckReturn !== null">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<q-file outlined dense v-model="filesReturn" label="ไฟล์หลักฐานการคืน" lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="dateCheckReturn !== null">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-sm-4">
<q-select hide-bottom-space :options="OrgList2" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId2" lazy-rules :label="`หน่วยงานที่คืน` "
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="dateCheckReturn !== null"/>
</div>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="Datereceive"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="dateCheckReceive !== null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
dense
borderless
outlined
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
hide-bottom-space
:model-value="
Datereceive != null ? date2Thai(Datereceive) : null
"
:label="`${'วันที่ได้รับ'}`"
clearable
@clear="clearReceiveDate"
:disable="dateCheckReceive !== null"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<q-file
outlined
dense
v-model="files"
label="ไฟล์หลักฐานการรับ"
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
:disable="dateCheckReceive !== null"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-sm-4">
<q-select
hide-bottom-space
:options="OrgList"
dense
borderless
option-label="name"
option-value="id"
emit-value
map-options
outlined
v-model="OrganazationId"
lazy-rules
:label="`หน่วยงานที่รับ`"
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
:disable="dateCheckReceive !== null"
/>
</div>
</div>
<div
v-if="dateCheckReceive !== null"
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-12 q-mt-sm"><q-separator /></div>
<div class="col-12 text-weight-bold text-grey-7">
นเครองราชฯ
</div>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="Datereturn"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="dateCheckReturn !== null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
dense
borderless
outlined
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
hide-bottom-space
:model-value="
Datereturn != null ? date2Thai(Datereturn) : undefined
"
:label="`${'วันที่คืน'}`"
clearable
@clear="clearReturnDate"
:disable="dateCheckReturn !== null"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<q-file
outlined
dense
v-model="filesReturn"
label="ไฟล์หลักฐานการคืน"
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']"
hide-bottom-space
:disable="dateCheckReturn !== null"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-sm-4">
<q-select
hide-bottom-space
:options="OrgList2"
dense
borderless
option-label="name"
option-value="id"
emit-value
map-options
outlined
v-model="OrganazationId2"
lazy-rules
:label="`หน่วยงานที่คืน`"
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
:disable="dateCheckReturn !== null"
/>
</div>
</div>
</div>
</q-form>
<q-separator />
<div class="q-px-md q-py-sm">
<div class="row justify-end">
<q-btn v-if="dateCheckReturn === null" label="บันทึก" color="public" @click="SaveData(props.dateCheckReceive === null ? 'receive':'return',props.personId as string)">
<q-btn
v-if="dateCheckReturn === null"
label="บันทึก"
color="public"
@click="
SaveData(
props.dateCheckReceive === null ? 'receive' : 'return',
props.personId as string
)
"
>
<q-tooltip>นท</q-tooltip>
</q-btn>
</div>

View file

@ -292,8 +292,8 @@ const fetchSalary = async (personalId: string) => {
data.monthSalaryAmount === 0
? null
: data.monthSalaryAmount,
// remarkVertical: data.remarkVertical,
// remarkHorizontal: data.remarkHorizontal,
remarkVertical: data.remarkVertical,
remarkHorizontal: data.remarkHorizontal,
};
})
.catch((e) => {