Merge branch 'develop' into dev-tee
This commit is contained in:
setthawutttty
commit
9d05105e02
37 changed files with 3603 additions and 560 deletions
|
|
@ -374,34 +374,34 @@ const menuList = readonly<any[]>([
|
|||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// key: 9,
|
||||
// icon: "mdi-calendar",
|
||||
// activeIcon: "mdi-calendar",
|
||||
// label: "การลา",
|
||||
// path: "leave",
|
||||
// role: "coin",
|
||||
// children: [
|
||||
// {
|
||||
// key: 9.1,
|
||||
// label: "รายการลงเวลาปฏิบัติงาน",
|
||||
// path: "/work-list",
|
||||
// role: "coin",
|
||||
// },
|
||||
// {
|
||||
// key: 9.2,
|
||||
// label: "รายการลา",
|
||||
// path: "/leave-list",
|
||||
// role: "coin",
|
||||
// },
|
||||
// {
|
||||
// key: 9.3,
|
||||
// label: "รายงานสถิติ",
|
||||
// path: "/statistics-report",
|
||||
// role: "coin",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
key: 9,
|
||||
icon: "mdi-calendar",
|
||||
activeIcon: "mdi-calendar",
|
||||
label: "การลา",
|
||||
path: "leave",
|
||||
role: "coin",
|
||||
children: [
|
||||
{
|
||||
key: 9.1,
|
||||
label: "รายการลงเวลาปฏิบัติงาน",
|
||||
path: "/work-list",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.2,
|
||||
label: "รายการลา",
|
||||
path: "/leave-list",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.3,
|
||||
label: "รายงานสถิติ",
|
||||
path: "/statistics-report",
|
||||
role: "coin",
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const tabList = readonly<tabType[]>([
|
||||
|
|
|
|||
134
src/interface/request/main/main.ts.rej
Normal file
134
src/interface/request/main/main.ts.rej
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
diff a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts (rejected hunks)
|
||||
@@ -374,104 +374,34 @@
|
||||
},
|
||||
],
|
||||
},
|
||||
- // {
|
||||
- // key: 8,
|
||||
- // icon: "mdi-medal-outline",
|
||||
- // activeIcon: "mdi-medal",
|
||||
- // label: "เครื่องราชฯ",
|
||||
- // path: "insignia",
|
||||
- // role: "insignia",
|
||||
- // children: [
|
||||
- // {
|
||||
- // key: 8.1,
|
||||
- // label: "เครื่องราชฯ",
|
||||
- // path: "",
|
||||
- // role: "insignia",
|
||||
- // children: [
|
||||
- // {
|
||||
- // label: "รอบการเสนอขอ",
|
||||
- // path: "insigniaProposals",
|
||||
- // role: "insignia",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "จัดการคำขอ",
|
||||
- // path: "insigniaManage",
|
||||
- // role: "insignia",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "บันทึกผลการได้รับพระราช...",
|
||||
- // path: "insigniaRecord",
|
||||
- // role: "insignia",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "บันทึกผลการจ่ายใบกำกับ",
|
||||
- // path: "VatInsignia",
|
||||
- // role: "insignia",
|
||||
- // },
|
||||
-
|
||||
- // {
|
||||
- // label: "จัดสรรเครื่องราชฯ",
|
||||
- // path: "insigniaAllocate",
|
||||
- // role: "insignia",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "รายงาน",
|
||||
- // path: "insigniaReport",
|
||||
- // role: "insignia",
|
||||
- // },
|
||||
- // ],
|
||||
- // },
|
||||
- // {
|
||||
- // key: 8.2,
|
||||
- // label: "เหรียญจักรพรรดิมาลา",
|
||||
- // path: "",
|
||||
- // role: "coin",
|
||||
- // children: [
|
||||
- // {
|
||||
- // label: "รอบการเสนอขอ",
|
||||
- // path: "coinProposals",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "จัดการคำขอ",
|
||||
- // path: "coinManage",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "บันทึกผลการได้รับพระราชทานเหรียญจักรพรรดิมาลา",
|
||||
- // path: "coinReceive",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "บันทึกผลการจ่ายใบกำกับ",
|
||||
- // path: "coinPayment",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // {
|
||||
- // label:
|
||||
- // "รายชื่อที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพระราชทานเหรียญจักรพรรดิมาลา",
|
||||
- // path: "coinRequest",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // // {
|
||||
- // // label: "ประวัติการยื่นขอ",
|
||||
- // // path: "coinHistory",
|
||||
- // // role: "coin",
|
||||
- // // },
|
||||
- // {
|
||||
- // label: "จัดสรรเหรียญตรา",
|
||||
- // path: "coinAllocate",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // {
|
||||
- // label: "รายงาน",
|
||||
- // path: "coinReport",
|
||||
- // role: "coin",
|
||||
- // },
|
||||
- // ],
|
||||
- // },
|
||||
- // ],
|
||||
- // },
|
||||
+ {
|
||||
+ key: 9,
|
||||
+ icon: "mdi-calendar",
|
||||
+ activeIcon: "mdi-calendar",
|
||||
+ label: "การลา",
|
||||
+ path: "leave",
|
||||
+ role: "coin",
|
||||
+ children: [
|
||||
+ {
|
||||
+ key: 9.1,
|
||||
+ label: "รายการลงเวลาปฏิบัติงาน",
|
||||
+ path: "/work-list",
|
||||
+ role: "coin",
|
||||
+ },
|
||||
+ {
|
||||
+ key: 9.2,
|
||||
+ label: "รายการลา",
|
||||
+ path: "/leave-list",
|
||||
+ role: "coin",
|
||||
+ },
|
||||
+ {
|
||||
+ key: 9.3,
|
||||
+ label: "รายงานสถิติ",
|
||||
+ path: "/statistics-report",
|
||||
+ role: "coin",
|
||||
+ },
|
||||
+ ],
|
||||
+ },
|
||||
]);
|
||||
|
||||
const tabList = readonly<tabType[]>([
|
||||
|
|
@ -1394,7 +1394,12 @@ const clickSave = async () => {
|
|||
myForm.value!.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
if (modalEdit.value) {
|
||||
await editData();
|
||||
if (selected.value == null) {
|
||||
fails($q, "กรุณาเลือกหน่วยงาน");
|
||||
} else {
|
||||
// console.log("save");
|
||||
await editData();
|
||||
}
|
||||
} else {
|
||||
if (selected.value == "") {
|
||||
fails($q, "กรุณาเลือกหน่วยงาน");
|
||||
|
|
@ -1402,7 +1407,6 @@ const clickSave = async () => {
|
|||
// console.log("save");
|
||||
await saveData();
|
||||
}
|
||||
// await saveData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1500,6 +1504,7 @@ const editData = async () => {
|
|||
isActive: isActive.value,
|
||||
isCondition: isCondition.value,
|
||||
conditionNote: conditionNote.value,
|
||||
organizationId: organizationId.value,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลร่างสำเร็จ");
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -27,9 +27,10 @@
|
|||
v-model="defaultEducation.educationLevelExamId"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
|
||||
:label="`${'วุฒิที่ใช้สมัครสอบ'}`"
|
||||
@update:model-value="(value) => checkInputName()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-3" v-if="showEducationName">
|
||||
<q-input
|
||||
class="q-pl-sm"
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
|
|
@ -220,6 +221,7 @@ const props = defineProps({
|
|||
|
||||
const $q = useQuasar();
|
||||
const edit = ref<boolean>(true);
|
||||
const showEducationName = ref<boolean>(true);
|
||||
const myform = ref<any>({});
|
||||
const route = useRoute();
|
||||
const candidateId = ref<string>(route.params.candidateId.toString());
|
||||
|
|
@ -276,6 +278,17 @@ const fetchData = async () => {
|
|||
});
|
||||
};
|
||||
|
||||
const checkInputName = () => {
|
||||
showEducationName.value =
|
||||
props.educationLevelOptions.filter(
|
||||
(x) =>
|
||||
x.id == defaultEducation.value.educationLevelExamId &&
|
||||
(x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
|
||||
).length == 0
|
||||
? false
|
||||
: true;
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@
|
|||
week-start="0"
|
||||
:max-date="new Date()"
|
||||
:disabled="!(status == 'checkRegister' || status == 'payment')"
|
||||
@update:modelValue="selectBirthDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -214,6 +215,7 @@
|
|||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultInformation.tel"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val) => val.length == 10 || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val) =>
|
||||
/^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลเบอร์โทรให้ถูกต้อง'}`,
|
||||
|
|
@ -440,7 +442,8 @@ const props = defineProps({
|
|||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calAge, modalError, success } = mixin;
|
||||
const { date2Thai, calAge, modalError, success, notifyError, calAgeYear } =
|
||||
mixin;
|
||||
const districtOptions = ref<DataOption[]>([]);
|
||||
const route = useRoute();
|
||||
const candidateId = ref<string>(route.params.candidateId.toString());
|
||||
|
|
@ -449,6 +452,7 @@ const myform = ref<any>({});
|
|||
const img = ref<string>("");
|
||||
const opNat = ref(["ไทย"]);
|
||||
const fileProfile = ref<File[]>([]);
|
||||
const registerEndDate = ref<Date>(new Date());
|
||||
|
||||
const { messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
|
|
@ -577,6 +581,21 @@ const getClass = (val: boolean) => {
|
|||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
const selectBirthDate = async () => {
|
||||
// if (defaultInformation.value.birthDate != null) {
|
||||
// if (
|
||||
// calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18
|
||||
// ) {
|
||||
// defaultInformation.value.birthDate = null;
|
||||
// notifyError($q, "อายุไม่ถึง18");
|
||||
// } else if (
|
||||
// calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60
|
||||
// ) {
|
||||
// defaultInformation.value.birthDate = null;
|
||||
// notifyError($q, "อายุเกิน60");
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
:label="`${'เงินเดือน'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
|
|
@ -124,6 +124,7 @@
|
|||
v-model="defaultOccupation.tel"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
|
||||
(val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
|
||||
(val) =>
|
||||
/^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง',
|
||||
]"
|
||||
|
|
|
|||
|
|
@ -67,15 +67,26 @@ const props = defineProps({
|
|||
</div> -->
|
||||
<div class="col q-pl-xl">
|
||||
<q-card class="q-pt-xs">
|
||||
<div class="header-text-right q-px-xs">ผลการสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
|
||||
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examNumber }}
|
||||
</div>
|
||||
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examRound }}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="header-text-right q-px-xs">ผลการสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.pass ? props.data.pass : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examNumber ? props.data.examNumber : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examRound ? props.data.examRound : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="เอกสารหลักฐาน"
|
||||
icon="mdi-file-document"
|
||||
:history="false"
|
||||
:changeBtn="changeBtn"
|
||||
:disable="statusEdit"
|
||||
:save="uploadData"
|
||||
/>
|
||||
<div class="row col-12 q-pt-sm">
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section top side>
|
||||
<div class="row col-12">
|
||||
<q-btn
|
||||
class="gt-xs"
|
||||
size="12px"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-download-outline"
|
||||
@click="downloadData(file.file)"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="gt-xs"
|
||||
size="12px"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-delete-outline"
|
||||
v-show="edit"
|
||||
@click="deleteData(file.id)"
|
||||
>
|
||||
<q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<q-input
|
||||
v-if="edit"
|
||||
class="q-mt-sm col-12 q-pb-xs"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="name"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
|
||||
:label="`${'ชื่อเอกสาร'}`"
|
||||
/>
|
||||
<q-uploader
|
||||
v-if="edit"
|
||||
color="gray"
|
||||
type="file"
|
||||
flat
|
||||
@factory="uploadData"
|
||||
ref="uploader"
|
||||
class="full-width"
|
||||
text-color="white"
|
||||
:max-size="10000000"
|
||||
accept=".jpg,.png,.pdf,.csv,.docx,.doc"
|
||||
bordered
|
||||
@added="fileAdd"
|
||||
>
|
||||
<template v-slot:header="scope">
|
||||
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
|
||||
<q-btn
|
||||
v-if="scope.queuedFiles.length > 0"
|
||||
icon="clear_all"
|
||||
@click="scope.removeQueuedFiles"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-tooltip>ลบทั้งหมด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="scope.uploadedFiles.length > 0"
|
||||
icon="done_all"
|
||||
@click="scope.removeUploadedFiles"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
|
||||
<div class="col">
|
||||
<div class="q-uploader__title">
|
||||
{{ "[ไฟล์ jpg,png,pdf,csv,docx ขนาดไม่เกิน 10MB]" }}
|
||||
</div>
|
||||
<div class="q-uploader__subtitle">
|
||||
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
|
||||
</div>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="scope.canAddFiles"
|
||||
type="a"
|
||||
icon="add_box"
|
||||
@click="scope.pickFiles"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-uploader-add-trigger />
|
||||
<q-tooltip>เลือกไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="scope.isUploading"
|
||||
icon="clear"
|
||||
@click="scope.abort"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</q-uploader>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, computed, ref, watch } from "vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
const $q = useQuasar(); // show dialog
|
||||
const mixin = useCounterMixin();
|
||||
const route = useRoute();
|
||||
const { success, messageError, showLoader, hideLoader } = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
const edit = ref<boolean>(false);
|
||||
const uploader = ref<any>();
|
||||
const files = ref<any>([]);
|
||||
const file = ref<any>([]);
|
||||
const name = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
// props.fetch()
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
if (profileId.value) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profilePaperId(profileId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
files.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const deleteData = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.profilePaperId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
});
|
||||
};
|
||||
|
||||
const uploadData = async () => {
|
||||
if (profileId.value) {
|
||||
if (file.value.length > 0) {
|
||||
const blob = file.value.slice(0, file.value[0].size);
|
||||
const newFile = new File(blob, name.value, {
|
||||
type: file.value[0].type,
|
||||
});
|
||||
const formData = new FormData();
|
||||
formData.append("avatar", newFile);
|
||||
formData.append("moss", "newFile");
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profilePaperId(profileId.value), formData)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
uploader.value.reset();
|
||||
name.value = "";
|
||||
edit.value = false;
|
||||
emit("update:statusEdit", false);
|
||||
await getData();
|
||||
});
|
||||
} else {
|
||||
// modalError(
|
||||
// $q,
|
||||
// "ไม่สามารถอัปโหลดไฟล์ได้",
|
||||
// "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
|
||||
// );
|
||||
getData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fileAdd = async (val: any) => {
|
||||
name.value = val[0].name;
|
||||
file.value = val;
|
||||
};
|
||||
|
||||
const downloadData = async (path: string) => {
|
||||
window.open(path);
|
||||
};
|
||||
|
||||
const changeBtn = async () => {
|
||||
name.value = "";
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false;
|
||||
props.notiNoEdit();
|
||||
} else {
|
||||
emit("update:statusEdit", true);
|
||||
}
|
||||
} else {
|
||||
emit("update:statusEdit", false);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -360,14 +360,13 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
};
|
||||
// เรียกดูรายละเอียดข้อมูล
|
||||
const selectData = (pid: string) => {
|
||||
router.push("/placement/personal-detail/" + pid);
|
||||
// if (roleAdmin.value === true) {
|
||||
// personalId.value = pid;
|
||||
// modal.value = true;
|
||||
// } else {
|
||||
// router.push("/placement/personal-detail/" + pid);
|
||||
// }
|
||||
const selectData = (pid: string, draft: string) => {
|
||||
if (roleAdmin.value && draft === 'ส่งตัวแล้ว') {
|
||||
personalId.value = pid;
|
||||
modal.value = true;
|
||||
} else {
|
||||
router.push("/placement/personal-detail/" + pid);
|
||||
}
|
||||
};
|
||||
const getNumFile = ref(0);
|
||||
const dataInfo = reactive({
|
||||
|
|
@ -582,7 +581,7 @@ const pagination = ref({
|
|||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="selectData(props.row.personalId)"
|
||||
@click="selectData(props.row.personalId, props.row.draft)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<template v-if="col.name === 'position'">
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ const close = async () => {
|
|||
<q-card bordered class="card-panding">
|
||||
<div class="row items-center q-pa-xs header-text">การสอบ</div>
|
||||
<div class="row q-pa-xs">
|
||||
<div class="col-6">
|
||||
<!-- <div class="col-6">
|
||||
<q-card class="card-exam q-pa-sm">
|
||||
<div class="row">
|
||||
<div class="col-4 q-pa-xs header-sub-text-exam">
|
||||
|
|
@ -260,8 +260,8 @@ const close = async () => {
|
|||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-1"></div>
|
||||
<div class="col-5 q-pt-sm q-pl-lg">
|
||||
<div class="col-1"></div> -->
|
||||
<div class="col-6 q-pt-sm q-pl-lg">
|
||||
<div class="row">
|
||||
<div class="col-7 header-sub-text">
|
||||
<div class="q-pb-sm">ผลการสอบ</div>
|
||||
|
|
|
|||
|
|
@ -342,8 +342,9 @@ onMounted(async () => {
|
|||
<span class="text-primary q-pr-sm">{{
|
||||
"ครั้งที่ " + round
|
||||
}}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="start_date"
|
||||
|
|
@ -367,8 +368,8 @@ onMounted(async () => {
|
|||
:model-value="
|
||||
start_date != null ? date2Thai(start_date) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ระหว่างวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -381,9 +382,8 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date_finish"
|
||||
|
|
@ -407,8 +407,8 @@ onMounted(async () => {
|
|||
:model-value="
|
||||
date_finish != null ? date2Thai(date_finish) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -421,7 +421,7 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
|
|||
|
|
@ -453,8 +453,9 @@ watch(lengthdiscipline_level, (newLength) => {
|
|||
<span class="text-primary q-pr-sm">{{
|
||||
`ครั้งที่ ${evaluate_no}`
|
||||
}}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="start_date"
|
||||
|
|
@ -478,8 +479,8 @@ watch(lengthdiscipline_level, (newLength) => {
|
|||
:model-value="
|
||||
start_date != null ? date2Thai(start_date) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ระหว่างวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -492,9 +493,8 @@ watch(lengthdiscipline_level, (newLength) => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date_finish"
|
||||
|
|
@ -518,8 +518,8 @@ watch(lengthdiscipline_level, (newLength) => {
|
|||
:model-value="
|
||||
date_finish != null ? date2Thai(date_finish) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -532,7 +532,7 @@ watch(lengthdiscipline_level, (newLength) => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
|
|||
|
|
@ -398,8 +398,9 @@ const getBordered = (i: boolean) => {
|
|||
บันทึกผล<span class="text-primary q-pr-sm">{{
|
||||
"ครั้งที่ " + round
|
||||
}}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="start_date"
|
||||
|
|
@ -423,8 +424,8 @@ const getBordered = (i: boolean) => {
|
|||
:model-value="
|
||||
start_date != null ? date2Thai(start_date) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ระหว่างวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -437,9 +438,8 @@ const getBordered = (i: boolean) => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date_finish"
|
||||
|
|
@ -463,8 +463,8 @@ const getBordered = (i: boolean) => {
|
|||
:model-value="
|
||||
date_finish != null ? date2Thai(date_finish) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -477,7 +477,7 @@ const getBordered = (i: boolean) => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
|
|||
|
|
@ -406,8 +406,9 @@ onMounted(async () => {
|
|||
บันทึกผล<span class="text-primary q-pr-sm">{{
|
||||
"ครั้งที่ " + round
|
||||
}}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="start_date"
|
||||
|
|
@ -431,8 +432,8 @@ onMounted(async () => {
|
|||
:model-value="
|
||||
start_date != null ? date2Thai(start_date) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ระหว่างวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -445,9 +446,8 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">
|
||||
</div>
|
||||
<div class="col-6 q-px-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date_finish"
|
||||
|
|
@ -471,8 +471,8 @@ onMounted(async () => {
|
|||
:model-value="
|
||||
date_finish != null ? date2Thai(date_finish) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -485,7 +485,7 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { ref, onMounted, computed, watch } from "vue";
|
||||
import AddList from "../ListRetirement/AddList.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -21,7 +21,10 @@ const {
|
|||
success,
|
||||
dialogConfirm,
|
||||
dialogRemove,
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
} = mixin;
|
||||
const myForm = ref<QForm | null>(null);
|
||||
|
||||
const retireld_params = route.params.retirementId;
|
||||
const modalNote = ref<boolean>(false);
|
||||
|
|
@ -33,9 +36,9 @@ const filter = ref<string>("");
|
|||
const statusUpload = ref<boolean>();
|
||||
const modalEdit = ref<boolean>(false);
|
||||
const textReport = ref<string>("");
|
||||
const employeeType = ref<string>("OFFICER")
|
||||
const employeeType = ref<string>("OFFICER");
|
||||
|
||||
const columns = ref<any["columns"]>([])
|
||||
const columns = ref<any["columns"]>([]);
|
||||
const rows = ref<any>([]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"order",
|
||||
|
|
@ -62,6 +65,7 @@ onMounted(() => {
|
|||
|
||||
const closeDialog = () => {
|
||||
modalNote.value = false;
|
||||
modalUpload.value = false;
|
||||
};
|
||||
const round = ref<number>();
|
||||
const typeReport = ref<string>("");
|
||||
|
|
@ -87,10 +91,22 @@ const fecthlistprofile = async (id: string) => {
|
|||
order: e.order,
|
||||
name: e.fullName,
|
||||
organizationOrganization: e.organizationOrganization,
|
||||
positionEmployeePosition: res.data.result.type == 'OFFICER' ? e.positionType : e.positionEmployeePosition,
|
||||
positionEmployeeLevel: res.data.result.type == 'OFFICER' ? (e.positionExecutive != null ? e.positionExecutive : "-") : e.positionEmployeeLevel,
|
||||
positionNumber: res.data.result.type == 'OFFICER' ? e.posNo : e.posNoEmployee,
|
||||
positionEmployeeGroup: res.data.result.type == 'OFFICER' ? e.position : e.positionEmployeeGroup,
|
||||
positionEmployeePosition:
|
||||
res.data.result.type == "OFFICER"
|
||||
? e.positionType
|
||||
: e.positionEmployeePosition,
|
||||
positionEmployeeLevel:
|
||||
res.data.result.type == "OFFICER"
|
||||
? e.positionExecutive != null
|
||||
? e.positionExecutive
|
||||
: "-"
|
||||
: e.positionEmployeeLevel,
|
||||
positionNumber:
|
||||
res.data.result.type == "OFFICER" ? e.posNo : e.posNoEmployee,
|
||||
positionEmployeeGroup:
|
||||
res.data.result.type == "OFFICER"
|
||||
? e.position
|
||||
: e.positionEmployeeGroup,
|
||||
organizationAgency: e.organizationAgency,
|
||||
organizationGovernmentAgency: e.organizationGovernmentAgency,
|
||||
bureau: e.oc,
|
||||
|
|
@ -136,7 +152,10 @@ const fecthlistprofile = async (id: string) => {
|
|||
{
|
||||
name: "positionEmployeeGroup",
|
||||
align: "left",
|
||||
label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ในสายงาน/ระดับ)" : "กลุ่มงาน",
|
||||
label:
|
||||
employeeType.value == "OFFICER"
|
||||
? "ตำแหน่ง (ในสายงาน/ระดับ)"
|
||||
: "กลุ่มงาน",
|
||||
title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "กลุ่มงาน",
|
||||
subtitle: employeeType.value == "OFFICER" ? "ในสายงาน/ระดับ" : "",
|
||||
field: "positionEmployeeGroup",
|
||||
|
|
@ -146,7 +165,8 @@ const fecthlistprofile = async (id: string) => {
|
|||
{
|
||||
name: "positionEmployeePosition",
|
||||
align: "left",
|
||||
label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
|
||||
label:
|
||||
employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
|
||||
title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ตำแหน่ง",
|
||||
subtitle: employeeType.value == "OFFICER" ? "ประเภท" : "",
|
||||
field: "positionEmployeePosition",
|
||||
|
|
@ -156,7 +176,10 @@ const fecthlistprofile = async (id: string) => {
|
|||
{
|
||||
name: "positionEmployeeLevel",
|
||||
align: "left",
|
||||
label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ทางการบริหาร)" : "ระดับชั้น",
|
||||
label:
|
||||
employeeType.value == "OFFICER"
|
||||
? "ตำแหน่ง (ทางการบริหาร)"
|
||||
: "ระดับชั้น",
|
||||
title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ระดับชั้น",
|
||||
subtitle: employeeType.value == "OFFICER" ? "ทางการบริหาร" : "",
|
||||
field: "positionEmployeeLevel",
|
||||
|
|
@ -287,25 +310,47 @@ const visibleNote = computed(() => {
|
|||
}
|
||||
});
|
||||
// อัปโหลดไฟล์
|
||||
const uploadFile = async (event: any) => {
|
||||
showLoader();
|
||||
const selectedFile = event;
|
||||
const formdata = new FormData();
|
||||
formdata.append("file", selectedFile);
|
||||
await http
|
||||
.put(config.API.fileRetirement(retireld.value.toString()), formdata)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มไฟล์สำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
fileUpload.value = null;
|
||||
fecthlistprofile(retireld.value);
|
||||
fecthCheck(retireld.value);
|
||||
hideLoader();
|
||||
const modalUpload = ref<boolean>(false);
|
||||
const signDate = ref<Date | null>(null);
|
||||
const uploadFile = async (event: any, signDate: any) => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((successmyForm) => {
|
||||
if (successmyForm) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
const selectedFile = event;
|
||||
const formdata = new FormData();
|
||||
formdata.append("file", selectedFile);
|
||||
if (signDate != null)
|
||||
formdata.append("signDate", dateToISO(signDate));
|
||||
await http
|
||||
.put(
|
||||
config.API.fileRetirement(retireld.value.toString()),
|
||||
formdata
|
||||
)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มไฟล์สำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
fileUpload.value = null;
|
||||
signDate.value = null;
|
||||
modalUpload.value = false;
|
||||
fecthlistprofile(retireld.value);
|
||||
fecthCheck(retireld.value);
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการอัปโหลดเอกสาร",
|
||||
"ต้องการยืนยันการอัปโหลดเอกสารนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// downloadAttachment
|
||||
const downloadAttachment = async (type: string, id: string) => {
|
||||
|
|
@ -382,69 +427,161 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
|
||||
<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="backHistory" />
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="backHistory"
|
||||
/>
|
||||
รายชื่อผู้เกษียณอายุราชการ
|
||||
</div>
|
||||
<div>
|
||||
<q-card class="col-12 q-pa-md">
|
||||
<div class="row col-12 q-pb-sm">
|
||||
<div class="row">
|
||||
<AddList :dataProfile="dataProfile" :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId"
|
||||
v-if="statusReport === false &&
|
||||
<AddList
|
||||
:dataProfile="dataProfile"
|
||||
:retireld="retireld"
|
||||
:profile-id="profileId"
|
||||
:UpdateListId="UpdateListId"
|
||||
v-if="
|
||||
statusReport === false &&
|
||||
(typeReport == 'ADD' || typeReport == '' || typeReport == null) &&
|
||||
statusUpload !== true
|
||||
" />
|
||||
"
|
||||
/>
|
||||
<q-btn color="primary" flat round icon="mdi-dots-vertical">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable v-close-popup type="a" @click="openmodalEditReport()" target="_blank">
|
||||
<q-item-section avatar><q-icon color="primary" name="mdi-pencil" /></q-item-section>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
type="a"
|
||||
@click="
|
||||
(modalUpload = true), (signDate = null), (fileUpload = null)
|
||||
"
|
||||
target="_blank"
|
||||
v-if="statusUpload !== true"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="attach_file"
|
||||
/></q-item-section>
|
||||
<q-item-section>อัปโหลดไฟล์ </q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
type="a"
|
||||
@click="openmodalEditReport()"
|
||||
target="_blank"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="primary" name="mdi-pencil"
|
||||
/></q-item-section>
|
||||
<q-item-section>แก้ไข มติ อ.ก.ก. </q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item clickable v-close-popup type="a" @click="downloadAttachment('pdf', retireld)" target="_blank">
|
||||
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
type="a"
|
||||
@click="downloadAttachment('pdf', retireld)"
|
||||
target="_blank"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup type="a" @click="downloadAttachment('docx', retireld)" target="_blank">
|
||||
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
type="a"
|
||||
@click="downloadAttachment('docx', retireld)"
|
||||
target="_blank"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-file bg-color="white" clearable outlined dense v-model="fileUpload" accept=".pdf"
|
||||
:style="fileUpload === null ? 'width: 150px' : 'width: auto'" label="อัปโหลดไฟล์"
|
||||
v-if="statusUpload !== true">
|
||||
<!-- <q-file
|
||||
bg-color="white"
|
||||
clearable
|
||||
outlined
|
||||
dense
|
||||
v-model="fileUpload"
|
||||
accept=".pdf"
|
||||
:style="fileUpload === null ? 'width: 150px' : 'width: auto'"
|
||||
label="อัปโหลดไฟล์"
|
||||
v-if="statusUpload !== true"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon color="light-blue" name="attach_file" />
|
||||
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
|
||||
</template>
|
||||
</q-file>
|
||||
<q-btn flat round color="light-blue" icon="upload" @click="uploadFile(fileUpload)" v-if="fileUpload !== null" />
|
||||
</q-file> -->
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="row">
|
||||
<q-tabs shrink>
|
||||
<q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
|
||||
style="max-width: 200px" class="q-ml-sm">
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
debounce="300"
|
||||
v-model="filter"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</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="gt-xs q-ml-sm">
|
||||
<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="gt-xs q-ml-sm"
|
||||
>
|
||||
</q-select>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
|
||||
:filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
|
||||
:pagination-label="paginationLabel" v-model:pagination="pagination">
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="order"
|
||||
class="custom-header-table"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
: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">
|
||||
|
|
@ -456,29 +593,45 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
</div>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
<q-th auto-width v-if="(typeReport === 'EDIT' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
" />
|
||||
<q-th
|
||||
auto-width
|
||||
v-if="
|
||||
(typeReport === 'EDIT' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
"
|
||||
/>
|
||||
<q-th auto-width v-else></q-th>
|
||||
<q-th auto-width v-if="(typeReport === 'REMOVE' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
" />
|
||||
<q-th
|
||||
auto-width
|
||||
v-if="
|
||||
(typeReport === 'REMOVE' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
"
|
||||
/>
|
||||
<q-th auto-width v-else></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
|
||||
@click.stop="router.push(`/registry/${props.row.profileId}`)">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
:style="props.row.profileId === profileId && 'color: #26a69a;'"
|
||||
@click.stop="router.push(`/registry/${props.row.profileId}`)"
|
||||
>
|
||||
<q-td key="order" :props="props">{{ props.row.order }} </q-td>
|
||||
<q-td key="name" :props="props">{{ props.row.name }}</q-td>
|
||||
<q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
|
||||
props.row.organizationOrganization }}</q-td>
|
||||
<q-td
|
||||
class="table_ellipsis"
|
||||
key="organizationOrganization"
|
||||
:props="props"
|
||||
>{{ props.row.organizationOrganization }}</q-td
|
||||
>
|
||||
<q-td key="positionEmployeeGroup" :props="props">{{
|
||||
props.row.positionEmployeeGroup
|
||||
}}</q-td>
|
||||
|
|
@ -502,41 +655,71 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
props.row.bureau
|
||||
}}</q-td>
|
||||
<q-td auto-width></q-td>
|
||||
<q-td auto-width v-if="(typeReport === 'EDIT' ||
|
||||
<q-td
|
||||
auto-width
|
||||
v-if="
|
||||
(typeReport === 'EDIT' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
">
|
||||
<q-btn flat round color="primary" icon="mdi-pencil" dense @click.stop="
|
||||
(modalNote = true),
|
||||
(note = props.row.reason),
|
||||
(action = 'edit'),
|
||||
(retireProfileId = props.row.id)
|
||||
">
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil"
|
||||
dense
|
||||
@click.stop="
|
||||
(modalNote = true),
|
||||
(note = props.row.reason),
|
||||
(action = 'edit'),
|
||||
(retireProfileId = props.row.id)
|
||||
"
|
||||
>
|
||||
<q-tooltip>กรอกเหตุผล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td auto-width v-else></q-td>
|
||||
<q-td auto-width v-if="(typeReport === 'REMOVE' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
">
|
||||
<q-btn flat round class="text-red-14" icon="mdi-delete" dense @click.stop="
|
||||
(modalNote = true),
|
||||
(action = 'delete'),
|
||||
(note = props.row.reason),
|
||||
(retireProfileId = props.row.id)
|
||||
"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
|
||||
<q-td
|
||||
auto-width
|
||||
v-if="
|
||||
(typeReport === 'REMOVE' ||
|
||||
typeReport === null ||
|
||||
typeReport === '') &&
|
||||
statusReport === false &&
|
||||
statusUpload !== true
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
class="text-red-14"
|
||||
icon="mdi-delete"
|
||||
dense
|
||||
@click.stop="
|
||||
(modalNote = true),
|
||||
(action = 'delete'),
|
||||
(note = props.row.reason),
|
||||
(retireProfileId = props.row.id)
|
||||
"
|
||||
><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-td>
|
||||
<q-td auto-width v-else></q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
|
||||
boundary-links direction-links></q-pagination>
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
color="primary"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
|
@ -551,21 +734,123 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
<q-card-section class="q-pt-none bg-grey-1">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
:label="`${'กรอกเหตุผล'}`" type="textarea" />
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="note"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
:label="`${'กรอกเหตุผล'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn v-if="action === 'delete'" label="บันทึก" color="secondary" :disable="visibleNote" @click="clickDelete" />
|
||||
<q-btn v-else label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
|
||||
<q-btn
|
||||
v-if="action === 'delete'"
|
||||
label="บันทึก"
|
||||
color="secondary"
|
||||
:disable="visibleNote"
|
||||
@click="clickDelete"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
label="บักทึก"
|
||||
color="secondary"
|
||||
@click="saveNote"
|
||||
:disable="visibleNote"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<DialogPopupReason :modal="modalEdit" title="แก้ไขมติ อ.ก.ก." label="มติ อ.ก.ก." :click-close="closemodalEditReport"
|
||||
:savaForm="saveEdiitReport" :textReport="textReport" />
|
||||
<!-- อัปโหลดไฟล์ -->
|
||||
<q-dialog v-model="modalUpload">
|
||||
<q-card style="width: 50vw">
|
||||
<DialogHeader tittle="อัปโหลดเอกสาร" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-form ref="myForm">
|
||||
<div class="row q-pa-md q-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-file
|
||||
bg-color="white"
|
||||
clearable
|
||||
outlined
|
||||
dense
|
||||
v-model="fileUpload"
|
||||
accept=".pdf"
|
||||
label="อัปโหลดเอกสาร"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกเอกสารอัปโหลด'}`]"
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon color="light-blue" name="attach_file" />
|
||||
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="signDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
lazy-rules
|
||||
:model-value="
|
||||
signDate !== null ? date2Thai(signDate) : null
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'ประกาศ ณ วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer text-primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="public"
|
||||
icon="mdi-content-save-outline"
|
||||
@click="uploadFile(fileUpload, signDate)"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<DialogPopupReason
|
||||
:modal="modalEdit"
|
||||
title="แก้ไขมติ อ.ก.ก."
|
||||
label="มติ อ.ก.ก."
|
||||
:click-close="closemodalEditReport"
|
||||
:savaForm="saveEdiitReport"
|
||||
:textReport="textReport"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,12 @@ const clickAdd = () => {
|
|||
action.value = "";
|
||||
radio.value = "";
|
||||
if (props.actionOptio) {
|
||||
actionOption.value = props.actionOptio;
|
||||
props.actionOptio;
|
||||
let list = props.actionOptio.map((e: any) => ({
|
||||
id: e.id,
|
||||
round: `รอบ ${e.round} (ฉบับวันที่ ${e.signDate})`,
|
||||
}));
|
||||
actionOption.value = list;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ const dateLeave = ref<Date | null>(null);
|
|||
const reason = ref<string>("");
|
||||
const location = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
const remarkHorizontal = ref<string>("");
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const actionPass = ref<boolean>(false);
|
||||
|
|
@ -144,6 +145,8 @@ const fetchData = async (id: string) => {
|
|||
.get(config.API.resingByid(id))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
|
||||
let list: TypeFile[] = [];
|
||||
if (data.docs.length > 0) {
|
||||
data.docs.map((doc: TypeFile) => {
|
||||
|
|
@ -165,6 +168,7 @@ const fetchData = async (id: string) => {
|
|||
reason.value = data.reason ?? "";
|
||||
location.value = data.location ?? "";
|
||||
status.value = data.status ?? "";
|
||||
remarkHorizontal.value = data.remarkHorizontal ?? "-";
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -296,11 +300,11 @@ const saveData = async () => {
|
|||
formData.append("PositionLevelOld", positionLevelOld.value);
|
||||
formData.append("PositionNumberOld", posNo.value);
|
||||
formData.append("AmountOld", salary.value.toString());
|
||||
salary;
|
||||
formData.append("remarkHorizontal", remarkHorizontal.value);
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.resingByid(id.value), formData)
|
||||
.then((res: any) => {
|
||||
.then(() => {
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
|
|
@ -822,7 +826,7 @@ const statusOrder = (val: boolean) => {
|
|||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4 row">
|
||||
<!-- <div class="col-xs-4 row">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -871,7 +875,7 @@ const statusOrder = (val: boolean) => {
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
|
|
@ -882,10 +886,25 @@ const statusOrder = (val: boolean) => {
|
|||
:borderless="!edit"
|
||||
v-model="reason"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ '}`,
|
||||
(val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'เหตุผลที่ลาออกจากราชการ '}`"
|
||||
:label="`${'เหตุผลที่ลาออกจากราชการ (หมายเหตุแนวตั้ง)'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="remarkHorizontal"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุแนวนอน '}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'หมายเหตุแนวนอน '}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,11 @@ const actionOption = ref<resMain[]>([]);
|
|||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"signDate",
|
||||
"Date",
|
||||
"retireNumber",
|
||||
"typeReport",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
]);
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -43,6 +44,14 @@ const columns = ref<QTableProps["columns"]>([
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "signDate",
|
||||
align: "left",
|
||||
label: "ประกาศ ณ วันที่",
|
||||
field: "signDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Date",
|
||||
align: "left",
|
||||
|
|
@ -96,6 +105,7 @@ const fetchRetirement = async (type: string, year: any) => {
|
|||
let data = res.data.result;
|
||||
rows.value = data.map((items: any) => ({
|
||||
id: items.id,
|
||||
signDate: date2Thai(items.signDate) ?? "-",
|
||||
Date: date2Thai(items.createdAt),
|
||||
year: items.year + 543,
|
||||
retireNumber: items.round,
|
||||
|
|
@ -133,6 +143,7 @@ const fetchRetirement = async (type: string, year: any) => {
|
|||
fiscalyear.value = year;
|
||||
}
|
||||
actionOption.value = rows.value;
|
||||
|
||||
rows.value.sort((a, b) => a.round - b.round); // เรียงรอบมากไปน้อย
|
||||
checkststus(rows.value);
|
||||
})
|
||||
|
|
@ -352,6 +363,9 @@ const typeReportChangeName = (val: string) => {
|
|||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="signDate" :props="props">
|
||||
{{ props.row.signDate }}
|
||||
</q-td>
|
||||
<q-td key="Date" :props="props">
|
||||
{{ props.row.Date }}
|
||||
</q-td>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
193
src/modules/09_leave/components/1_Work/DialogDetail.vue
Normal file
193
src/modules/09_leave/components/1_Work/DialogDetail.vue
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
},
|
||||
colse: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
// รายละเอียดข้อมูง
|
||||
const titlename = ref<string>("");
|
||||
const timeIn = ref<string>("");
|
||||
const timeOut = ref<string>("");
|
||||
const coordinatesIn = ref<string>("");
|
||||
const coordinatesOut = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
watch(props, () => {
|
||||
if (props.modal) {
|
||||
if (props.detail) {
|
||||
console.log(props.detail);
|
||||
let data = props.detail;
|
||||
titlename.value = data.fullName;
|
||||
timeIn.value = data.timeIn;
|
||||
timeOut.value = data.timeOut;
|
||||
coordinatesIn.value = data.coordinatesIn;
|
||||
coordinatesOut.value = data.coordinatesOut;
|
||||
status.value = data.status;
|
||||
}
|
||||
}
|
||||
});
|
||||
// ปิด popup
|
||||
function colsePopup() {
|
||||
props.colse ? props.colse() : false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal">
|
||||
<q-card style="width: 950px; max-width: 80vw">
|
||||
<q-card-section>
|
||||
<q-toolbar>
|
||||
<q-toolbar-title>
|
||||
รายละเอียดการลงเวลาของ
|
||||
<span class="text-primary">{{ titlename }}</span>
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
@click="colsePopup"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="q-pa-md">
|
||||
<q-banner
|
||||
inline-actions
|
||||
rounded
|
||||
class="bg-grey-2"
|
||||
style="border: 2px solid rgb(215, 212, 212)"
|
||||
>
|
||||
<div class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>ชื่อ-นามสกุล</q-item-label>
|
||||
<q-item-label>{{ titlename }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>วันที่เข้างาน</q-item-label>
|
||||
<q-item-label>05 ต.ค. 56</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>สถานะ</q-item-label>
|
||||
<q-item-label>{{ status }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
><q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-banner>
|
||||
<div class="row q-gutter-md q-mt-md">
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>เวลาเข้างาน</q-item-section
|
||||
>
|
||||
<q-item-section> {{ timeIn }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">พิกัด</q-item-section>
|
||||
<q-item-section> {{ coordinatesIn }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section top class="text-grey-5"
|
||||
>รูปภาพ</q-item-section
|
||||
>
|
||||
<q-item-section>
|
||||
<q-img src="https://picsum.photos/500/300" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเหตุ</q-item-section
|
||||
>
|
||||
<q-item-section> - </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>เวลาออกงาน</q-item-section
|
||||
>
|
||||
<q-item-section> {{ timeOut }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">พิกัด</q-item-section>
|
||||
<q-item-section> {{ coordinatesOut }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section top class="text-grey-5"
|
||||
>รูปภาพ</q-item-section
|
||||
>
|
||||
<q-item-section>
|
||||
<q-img src="https://picsum.photos/500/300" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเหตุ</q-item-section
|
||||
>
|
||||
<q-item-section> - </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
304
src/modules/09_leave/components/1_Work/TableList.vue
Normal file
304
src/modules/09_leave/components/1_Work/TableList.vue
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
||||
|
||||
//importComponents
|
||||
import DialogDetail from "./DialogDetail.vue";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const workStore = useWorklistDataStore();
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
const { searchDataFn, filterFn } = workStore;
|
||||
onMounted(() => {});
|
||||
|
||||
//ข้อมูล Table
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "timeIn",
|
||||
align: "left",
|
||||
label: "เวลาเข้างาน",
|
||||
sortable: true,
|
||||
field: "timeIn",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "coordinatesIn",
|
||||
align: "left",
|
||||
label: "พิกัด",
|
||||
sortable: true,
|
||||
field: "coordinatesIn",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "timeOut",
|
||||
align: "left",
|
||||
label: "เวลาออกงาน",
|
||||
sortable: true,
|
||||
field: "timeOut",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "coordinatesOut",
|
||||
align: "left",
|
||||
label: "พิกัด",
|
||||
sortable: true,
|
||||
field: "coordinatesOut",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullName",
|
||||
"timeIn",
|
||||
"coordinatesIn",
|
||||
"timeOut",
|
||||
"coordinatesOut",
|
||||
"status",
|
||||
]);
|
||||
//DialogDetail
|
||||
const modal = ref<boolean>(false);
|
||||
const dataDetail = ref<any>([]);
|
||||
// เปิด popup ลายละเอียด
|
||||
function clickDetail(data: any) {
|
||||
modal.value = true;
|
||||
dataDetail.value = data;
|
||||
} //ปิด popup ลายละเอียด
|
||||
function colseDeyail() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
|
||||
//pagination
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
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>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="workStore.selectDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
:model-value="
|
||||
workStore.selectDate !== null
|
||||
? date2Thai(workStore.selectDate)
|
||||
: null
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer text-primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="workStore.selectStatus"
|
||||
:options="workStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="filterFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="workStore.rows"
|
||||
:filter="workStore.filterTable"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
: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-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props" @click.prevent="clickDetail(props.row)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="fullName"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.fullName }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="timeIn"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.timeIn }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="coordinatesIn"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latIn + " " + props.row.longIn
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-td>
|
||||
<q-td
|
||||
key="timeOut"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.timeOut }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="coordinatesOut"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latOut + " " + props.row.longOut
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-td>
|
||||
<q-td
|
||||
key="status"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.status }}
|
||||
</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>
|
||||
</d-table>
|
||||
|
||||
<DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
194
src/modules/09_leave/components/2_Leave/DetailLeave.vue
Normal file
194
src/modules/09_leave/components/2_Leave/DetailLeave.vue
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const paramsId = route.params.id;
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div class="q-mr-xl">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave-list`)"
|
||||
/>
|
||||
รายละเอียดการลาของ {{ paramsId }}
|
||||
</div>
|
||||
<div class="q-ml-xl">
|
||||
<q-btn
|
||||
icon="mdi-download"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
icon="mdi-upload"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="blue-10"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<q-banner inline-actions rounded class="bg-grey-2">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section avatar class="text-grey-6"
|
||||
>ประเภทการลา</q-item-section
|
||||
>
|
||||
<q-item-section class="text-primary"> ลาป่วย </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="text-grey-6">
|
||||
ชื่อ - นามสกุล</q-item-section
|
||||
>
|
||||
|
||||
<q-item-section> {{ paramsId }} </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-blue-10">10</div>
|
||||
<div class="text-subtitle2">โควต้าลาป่วย</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
8
|
||||
</div>
|
||||
<div class="text-subtitle2">ลาป่วยไปแล้ว</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">2</div>
|
||||
<div class="text-subtitle2">คงเหลือโควต้าลาป่วย</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-banner>
|
||||
<div class="row q-gutter-md q-mt-md">
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
|
||||
<q-item-section> บ้าน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>รับเงินเดือน</q-item-section
|
||||
>
|
||||
<q-item-section> รับเงินเดือน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
|
||||
<q-item-section> บ้าน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>รับเงินเดือน</q-item-section
|
||||
>
|
||||
<q-item-section> รับเงินเดือน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
วัน เดือน ปีเริ่มต้น</q-item-section
|
||||
>
|
||||
<q-item-section> 14 ก.ค. 2556 </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
วัน เดือน ปีเริ่มสิ้นสุด</q-item-section
|
||||
>
|
||||
<q-item-section> 15 ก.ค. 2556 </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>จำนวนวันที่ลา</q-item-section
|
||||
>
|
||||
<q-item-section> 1 </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>สถานที่ติดต่อขณะลา</q-item-section
|
||||
>
|
||||
<q-item-section> สถานที่ติดต่อขณะลา </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเลขที่ติดต่อขณะลา</q-item-section
|
||||
>
|
||||
<q-item-section> หมายเลขที่ติดต่อขณะลา </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>สถานะการพิจารณา</q-item-section
|
||||
>
|
||||
<q-item-section> ขอยกเลิก </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-h5"> เอกสารแบบ</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
ไม่พบเอกสาร</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn color="orange-5" label="ไม่อนุมัติ"
|
||||
><q-tooltip>ไม่อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn color="primary" label="อนุมัติ"
|
||||
><q-tooltip>อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped></style>
|
||||
236
src/modules/09_leave/components/2_Leave/TableList.vue
Normal file
236
src/modules/09_leave/components/2_Leave/TableList.vue
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
q
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
const { optionYear, searchDataFn, filterOption } = leaveStore; // เรียน funtion จาก stores
|
||||
|
||||
// ข้อมูล TABLE
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "leaveType",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Date",
|
||||
align: "left",
|
||||
label: "วันที่ยืนใบลา",
|
||||
sortable: true,
|
||||
field: "Date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"leaveType",
|
||||
"name",
|
||||
"Date",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectYear"
|
||||
:options="optionYear"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ปีงบประมาณ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectType"
|
||||
:options="leaveStore.optionType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ประเภทการลา"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'type')
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-if="leaveStore.tab == '2'"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectStatus"
|
||||
:options="leaveStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'status')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="leaveStore.rows"
|
||||
:filter="leaveStore.filterTable"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
:loading="leaveStore.loadTable"
|
||||
>
|
||||
<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-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click.prevent="router.push(`/leave/detail/${props.row.name}`)"
|
||||
>
|
||||
<q-td key="no" :props="props"> {{ props.rowIndex + 1 }} </q-td>
|
||||
<q-td key="leaveType" :props="props">
|
||||
{{ props.row.leaveType }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="Date" :props="props">
|
||||
{{ props.row.Date }}
|
||||
</q-td>
|
||||
<q-td key="timeOut" :props="props">
|
||||
{{ props.row.timeOut }}
|
||||
</q-td>
|
||||
<q-td key="status" :props="props">
|
||||
{{ props.row.status }}
|
||||
</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>
|
||||
<template v-slot:loading>
|
||||
<q-inner-loading showing color="primary" />
|
||||
</template>
|
||||
</d-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
7
src/modules/09_leave/interface/index/Main.ts
Normal file
7
src/modules/09_leave/interface/index/Main.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
interface DataOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
export type {
|
||||
DataOption
|
||||
};
|
||||
49
src/modules/09_leave/router.ts
Normal file
49
src/modules/09_leave/router.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
|
||||
const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
|
||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
|
||||
const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/work-list",
|
||||
name: "/work-list",
|
||||
component: workMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave-list",
|
||||
name: "/leave-list",
|
||||
component: leaveMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave/detail/:id",
|
||||
name: "/leave/detail",
|
||||
component: leaveDetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/statistics-report",
|
||||
name: "/statistics-report",
|
||||
component: reportMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
180
src/modules/09_leave/stores/LeaveStore.ts
Normal file
180
src/modules/09_leave/stores/LeaveStore.ts
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
export const useLeavelistDataStore = defineStore("leave", () => {
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<string>("")
|
||||
const amounttab2 = ref<string>("")
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([])
|
||||
const rows = ref<any>([])
|
||||
const loadTable = ref<boolean>(false)
|
||||
async function fecthList(data: any) {
|
||||
let datalist = data.map((e: any) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
const filteramounttab1 = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
amounttab1.value = filteramounttab1.length
|
||||
amounttab2.value = datalist.length
|
||||
await fetchOption()
|
||||
await searchDataFn(selectType.value, selectStatus.value)
|
||||
|
||||
|
||||
}
|
||||
//filter table
|
||||
const selectYear = ref<string>('all')
|
||||
const selectType = ref<string>('all')
|
||||
const selectStatus = ref<string>('all')
|
||||
const optionYear = ref<DataOption[]>([{ id: "all", name: 'ทั้งหมด' }])
|
||||
const optionType = ref<DataOption[]>([])
|
||||
const optionStatus = ref<DataOption[]>([])
|
||||
const optionTypeMain = ref<DataOption[]>([])
|
||||
const optionStatusMain = ref<DataOption[]>([])
|
||||
const filterTable = ref<string>('')
|
||||
function searchDataFn(type: string, status: string) {
|
||||
// selectYear.value = selectYear.value || "all"
|
||||
type = type || "all"
|
||||
status = status || "all"
|
||||
// showLoader()
|
||||
loadTable.value = true
|
||||
if (selectYear.value == "all" && type == "all" && status == "all") {
|
||||
rows.value = mainData.value
|
||||
} else if (selectYear.value !== "all" && type == "all" && status == "all") {
|
||||
console.log("ค้นหาจากปี");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากประเภท");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type)
|
||||
} else if (selectYear.value == "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.status === status)
|
||||
} else if (selectYear.value !== "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากปีและประเภท");
|
||||
} else if (selectYear.value !== "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากปีและสถานะ");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status !== "all") {
|
||||
console.log("ค้นหาจากประเภทและสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type && e.status === status)
|
||||
} else (console.log("ค้นหาจากทั้งหมด"))
|
||||
setTimeout(function () {
|
||||
loadTable.value = false
|
||||
}, 500);
|
||||
|
||||
}
|
||||
function clearFilter() {
|
||||
selectYear.value = "all"
|
||||
selectType.value = "all"
|
||||
selectStatus.value = "all"
|
||||
filterTable.value = ''
|
||||
}
|
||||
|
||||
function fetchOption() {
|
||||
let data = []
|
||||
data = mainData.value
|
||||
const double_leaveType = [
|
||||
...new Set(data.map((item: any) => item.leaveType)),
|
||||
];
|
||||
// หา optionType
|
||||
optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_leaveType.length; i++) {
|
||||
const type = double_leaveType[i - 1];
|
||||
if (typeof type === 'string') {
|
||||
const listtype: DataOption = {
|
||||
id: type,
|
||||
name: type,
|
||||
};
|
||||
optionTypeMain.value.push(listtype)
|
||||
optionType.value = optionTypeMain.value
|
||||
}
|
||||
}
|
||||
// หา optionStatus
|
||||
const double_status = [
|
||||
...new Set(data.map((item: any) => item.status)),
|
||||
];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === 'string') {
|
||||
const liststatus: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(liststatus);
|
||||
optionStatus.value = optionStatusMain.value
|
||||
}
|
||||
}
|
||||
}
|
||||
// filter option
|
||||
function filterOption(val: string, update: any, type: string) {
|
||||
let data: DataOption[] = []
|
||||
let filter: DataOption[] = []
|
||||
if (type == "type") {
|
||||
data = optionTypeMain.value
|
||||
} else if (type == "status") {
|
||||
data = optionStatusMain.value
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
filter = data.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "type") {
|
||||
optionType.value = filter
|
||||
} else if (type == "status") {
|
||||
optionStatus.value = filter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ใหม่"
|
||||
case "2":
|
||||
return "อยู่ระหว่างกำเนินการ"
|
||||
case "3":
|
||||
return "อนุมัติ"
|
||||
}
|
||||
}
|
||||
return {
|
||||
tab,
|
||||
amounttab1,
|
||||
amounttab2,
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
fecthList,
|
||||
loadTable,
|
||||
//filter table
|
||||
filterTable,
|
||||
selectYear,
|
||||
selectType,
|
||||
selectStatus,
|
||||
optionYear,
|
||||
optionType,
|
||||
optionStatus,
|
||||
clearFilter,
|
||||
searchDataFn,
|
||||
filterOption,
|
||||
|
||||
|
||||
};
|
||||
})
|
||||
0
src/modules/09_leave/stores/ReportStore.ts
Normal file
0
src/modules/09_leave/stores/ReportStore.ts
Normal file
100
src/modules/09_leave/stores/WorkStore.ts
Normal file
100
src/modules/09_leave/stores/WorkStore.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
export const useWorklistDataStore = defineStore("work", () => {
|
||||
// ข้อมูลในตาราง
|
||||
const rows = ref<any>([])
|
||||
const dataMain = ref<any>([])
|
||||
function fecthList(data: any) {
|
||||
let datalist = data.map((e: any) => ({
|
||||
fullName: e.fullName,
|
||||
timeIn: e.timeIn,
|
||||
coordinatesIn: e.coordinatesIn,
|
||||
latIn: e.latIn,
|
||||
longIn: e.longIn,
|
||||
timeOut: e.timeOut,
|
||||
coordinatesOut: e.coordinatesOut,
|
||||
latOut: e.latOut,
|
||||
longOut: e.longOut,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
dataMain.value = datalist
|
||||
fetchOption()
|
||||
searchDataFn(selectDate.value, selectStatus.value)
|
||||
}
|
||||
|
||||
//ค้นหาข้อมูล
|
||||
const filterTable = ref<string>('')
|
||||
const selectDate = ref<Date | null>(null);
|
||||
const selectStatus = ref<String>('all')
|
||||
const optionStatusMain = ref<DataOption[]>([])
|
||||
const optionStatus = ref<DataOption[]>([])
|
||||
function searchDataFn(searchDate: any, srarchStatus: any) {
|
||||
srarchStatus = srarchStatus || "all";
|
||||
if (searchDate == null && srarchStatus == "all") {
|
||||
rows.value = dataMain.value
|
||||
} else if (searchDate == null && srarchStatus !== "all") {
|
||||
rows.value = dataMain.value.filter((e: any) => e.status === convertSatatus(srarchStatus))
|
||||
}
|
||||
}
|
||||
//
|
||||
function fetchOption() {
|
||||
const double_status = [
|
||||
...new Set(dataMain.value.map((item: any) => item.status)),
|
||||
];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === 'string') {
|
||||
const listtype: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(listtype)
|
||||
optionStatus.value = optionStatusMain.value
|
||||
}
|
||||
}
|
||||
}
|
||||
function filterFn(val: string, update: any) {
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
optionStatus.value = optionStatusMain.value;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
optionStatus.value = optionStatusMain.value.filter(
|
||||
(e: any) => e.name.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ลงเวลาเรียบร้อย"
|
||||
case "2":
|
||||
return "สายทำงานครบ"
|
||||
default:
|
||||
return "ยังไม่ได้ลงเวลา"
|
||||
}
|
||||
}
|
||||
return {
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
fecthList,
|
||||
//ค้นหาข้อมูล
|
||||
filterTable,
|
||||
selectDate,
|
||||
selectStatus,
|
||||
optionStatus,
|
||||
searchDataFn,
|
||||
filterFn,
|
||||
convertSatatus
|
||||
|
||||
};
|
||||
})
|
||||
121
src/modules/09_leave/views/LeaveListMain.vue
Normal file
121
src/modules/09_leave/views/LeaveListMain.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
// importStroe
|
||||
import { useLeavelistDataStore } from "../stores/LeaveStore";
|
||||
// importComponets
|
||||
import TableList from "../components/2_Leave/TableList.vue";
|
||||
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const { fecthList, clearFilter } = leaveStore;
|
||||
|
||||
onMounted(() => {
|
||||
fecthLeaveList();
|
||||
});
|
||||
// เรียกข้อมูลจาก API
|
||||
function fecthLeaveList() {
|
||||
const data = [
|
||||
{
|
||||
leaveType: "ลาป่วย",
|
||||
name: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
Date: "",
|
||||
status: "1",
|
||||
},
|
||||
{
|
||||
leaveType: "ลากิจส่วนตัว",
|
||||
name: "นายนครชัย วันดี",
|
||||
Date: "",
|
||||
status: "3",
|
||||
},
|
||||
{
|
||||
leaveType: "ลากิจส่วนตัว",
|
||||
name: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
Date: "",
|
||||
status: "2",
|
||||
},
|
||||
{
|
||||
leaveType: "ลาป่วย",
|
||||
name: "นายปิยรมย์ ศิริธาราฟ",
|
||||
Date: "",
|
||||
status: "2",
|
||||
},
|
||||
];
|
||||
fecthList(data); // ส่งข้อมูลไป stores
|
||||
}
|
||||
//เปลี่ยน Tab
|
||||
function changTab() {
|
||||
clearFilter();
|
||||
fecthLeaveList();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายการลา</div>
|
||||
<div>
|
||||
<!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
|
||||
<div class="q-pa-md">
|
||||
<q-tabs
|
||||
v-model="leaveStore.tab"
|
||||
dense
|
||||
align="left"
|
||||
inline-label
|
||||
class="bg-grey-4 rounded-borders"
|
||||
indicator-color="white"
|
||||
>
|
||||
<q-tab
|
||||
@click="changTab"
|
||||
name="1"
|
||||
label="รายการลาที่อยู่ระหว่างดำเนิดการ"
|
||||
:class="
|
||||
leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders ' : ''
|
||||
"
|
||||
>
|
||||
<q-badge
|
||||
color="grey-4"
|
||||
:class="
|
||||
leaveStore.tab == '1'
|
||||
? 'q-px-sm text-weight-medium text-primary q-ml-xl'
|
||||
: 'q-px-sm text-weight-medium text-black q-ml-xl'
|
||||
"
|
||||
:label="leaveStore.amounttab1"
|
||||
rounded
|
||||
/>
|
||||
</q-tab>
|
||||
<q-tab
|
||||
@click="changTab"
|
||||
name="2"
|
||||
label="รายการลาทั้งหมด"
|
||||
:class="
|
||||
leaveStore.tab == '2'
|
||||
? 'bg-white text-primary rounded rounded-borders '
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<q-badge
|
||||
color="grey-4"
|
||||
:class="
|
||||
leaveStore.tab == '2'
|
||||
? 'q-px-sm text-weight-medium text-primary q-ml-xl'
|
||||
: 'q-px-sm text-weight-medium text-black q-ml-xl'
|
||||
"
|
||||
:label="leaveStore.amounttab2"
|
||||
rounded
|
||||
/>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
|
||||
<q-tab-panels v-model="leaveStore.tab" animated>
|
||||
<q-tab-panel name="1">
|
||||
<!-- <TableList1 /> -->
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="2">
|
||||
<!-- <TabList2Vue /> -->
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
<!-- </q-card> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
9
src/modules/09_leave/views/ReportMain.vue
Normal file
9
src/modules/09_leave/views/ReportMain.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm"> </q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
84
src/modules/09_leave/views/WorkingMain.vue
Normal file
84
src/modules/09_leave/views/WorkingMain.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useWorklistDataStore } from "../stores/WorkStore";
|
||||
//import Components
|
||||
import TableList from "../components/1_Work/TableList.vue";
|
||||
// use Store
|
||||
const mixin = useCounterMixin();
|
||||
const workStore = useWorklistDataStore();
|
||||
const { date2Thai } = mixin;
|
||||
const { fecthList } = workStore;
|
||||
|
||||
onMounted(() => {
|
||||
fecthWorkList();
|
||||
});
|
||||
//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
|
||||
function fecthWorkList() {
|
||||
const listData = [
|
||||
{
|
||||
fullName: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "1",
|
||||
},
|
||||
{
|
||||
fullName: "นายนครชัย วันดี",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "2",
|
||||
},
|
||||
{
|
||||
fullName: "นายปิยรมย์ ศิริธาราฟ",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "3",
|
||||
},
|
||||
{
|
||||
fullName: "นางสาวปลาทอง ใจกล้า",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "1",
|
||||
},
|
||||
];
|
||||
fecthList(listData); // ส่งข้อมูลไปยัง stores
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการลงเวลาปฏิบัติงาน
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<TableList /></div
|
||||
></q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -665,17 +665,22 @@ const pagination = ref({
|
|||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="modalData.remarkVertical"
|
||||
label="หมายเหตุแนวตั้ง"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
|
||||
<div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="modalData.remarkHorizontal"
|
||||
type="textarea"
|
||||
label="หมายเหตุแนวนอน"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import ModuleRetirement from "@/modules/06_retirement/router";
|
|||
import ModuleInsignia from "@/modules/07_insignia/router";
|
||||
import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
|
||||
import ModuleOrder from "@/modules/10_order/router";
|
||||
import ModuleLeave from "@/modules/09_leave/router"
|
||||
|
||||
// TODO: ใช้หรือไม่?
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
|
@ -44,6 +45,7 @@ const router = createRouter({
|
|||
...ModuleInsignia,
|
||||
...ModuleRegistryEmployee,
|
||||
...ModuleOrder,
|
||||
...ModuleLeave
|
||||
],
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -198,6 +198,48 @@ export const useCounterMixin = defineStore("mixin", () => {
|
|||
return date.getDate().toString().padStart(2, "0") + " " + dstMonth;
|
||||
}
|
||||
|
||||
const calAgeYear = (srcDate: Date, birthCal: Date = new Date()) => {
|
||||
const toDay = birthCal;
|
||||
const birth = new Date(srcDate);
|
||||
|
||||
const yearNow = toDay.getFullYear();
|
||||
const monthNow = toDay.getMonth();
|
||||
const dateNow = toDay.getDate();
|
||||
|
||||
const yearDob = birth.getFullYear();
|
||||
const monthDob = birth.getMonth();
|
||||
const dateDob = birth.getDate();
|
||||
|
||||
const lastYear = 12;
|
||||
const subtractDate: Object = moment().subtract(1, "months").endOf("month");
|
||||
|
||||
const lastMonths = new Date(subtractDate.toString()).getDate();
|
||||
|
||||
let yearAge = yearNow - yearDob;
|
||||
let monthAge = 0;
|
||||
let dateAge = 0;
|
||||
|
||||
if (monthNow >= monthDob) {
|
||||
monthAge = monthNow - monthDob;
|
||||
} else {
|
||||
yearAge--;
|
||||
monthAge = lastYear + monthNow - monthDob;
|
||||
}
|
||||
|
||||
if (dateNow >= dateDob) {
|
||||
dateAge = dateNow - dateDob;
|
||||
} else {
|
||||
monthAge--;
|
||||
dateAge = lastMonths + dateNow - dateDob;
|
||||
|
||||
if (monthAge < 0) {
|
||||
monthAge = 11;
|
||||
yearAge--;
|
||||
}
|
||||
}
|
||||
return yearAge;
|
||||
};
|
||||
|
||||
function monthYear2Thai(month: number, year: number, isFullMonth = false) {
|
||||
const date = new Date(`${year}-${month + 1}-1`);
|
||||
const fullMonthThai = [
|
||||
|
|
@ -809,6 +851,7 @@ export const useCounterMixin = defineStore("mixin", () => {
|
|||
dateToISO,
|
||||
notify,
|
||||
notifyError,
|
||||
calAgeYear,
|
||||
dateText,
|
||||
monthYear2Thai,
|
||||
dateMonth2Thai,
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ onMounted(async () => {
|
|||
if (keycloak.tokenParsed) {
|
||||
await fetchroleUser(keycloak.tokenParsed.role);
|
||||
}
|
||||
|
||||
|
||||
await getDataNotification();
|
||||
myEventHandler(null, false);
|
||||
window.addEventListener("resize", (e: any) => {
|
||||
|
|
@ -440,8 +440,20 @@ const clickDelete = (id: string) => {
|
|||
<!-- header -->
|
||||
<q-header flat class="bg-grey-2 text-dark" height-hint="7">
|
||||
<q-toolbar style="padding: 0 2%">
|
||||
<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
|
||||
<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
|
||||
<q-btn
|
||||
size="13px"
|
||||
class="bg-grey-3"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
@click="toggleBtnLeft"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<q-icon
|
||||
:name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
|
||||
size="20px"
|
||||
color="grey-7"
|
||||
/>
|
||||
</q-btn>
|
||||
|
||||
<q-space />
|
||||
|
|
@ -457,11 +469,24 @@ const clickDelete = (id: string) => {
|
|||
</q-btn>
|
||||
-->
|
||||
<!-- Notification -->
|
||||
<q-btn round dense flat size="13px" class="q-mx-md bg-grey-3" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
|
||||
:disable="notiList.length === 0">
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
size="13px"
|
||||
class="q-mx-md bg-grey-3"
|
||||
:color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
|
||||
:disable="notiList.length === 0"
|
||||
>
|
||||
<q-icon name="mdi-bell" size="18px" color="grey-7" />
|
||||
<q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length
|
||||
}}</q-badge>
|
||||
<q-badge
|
||||
rounded
|
||||
v-show="notiList.length > 0"
|
||||
color="negative"
|
||||
text-color="white"
|
||||
floating
|
||||
>{{ notiList.length }}</q-badge
|
||||
>
|
||||
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
|
||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||
<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
|
||||
|
|
@ -484,8 +509,14 @@ const clickDelete = (id: string) => {
|
|||
date2Thai(n.timereceive)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"
|
||||
@click="clickDelete(n.id)"></q-btn>
|
||||
<q-btn
|
||||
size="sm"
|
||||
unelevated
|
||||
dense
|
||||
icon="mdi-close"
|
||||
class="mybtn q-mx-xs"
|
||||
@click="clickDelete(n.id)"
|
||||
></q-btn>
|
||||
</q-item>
|
||||
<q-separator color="grey-2" />
|
||||
</q-list>
|
||||
|
|
@ -509,7 +540,10 @@ const clickDelete = (id: string) => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px">
|
||||
<div
|
||||
class="row justify-center"
|
||||
style="border-top: solid 3px #1bb19b !important; width: 273.797px"
|
||||
>
|
||||
<div class="column items-center col-12 q-py-md" color="grey-3">
|
||||
<q-avatar size="72px" color="grey-4">
|
||||
<q-icon name="mdi-account" color="grey-7" />
|
||||
|
|
@ -518,7 +552,14 @@ const clickDelete = (id: string) => {
|
|||
<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
|
||||
{{ fullname }}
|
||||
</div>
|
||||
<q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!-- -->
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="ออกจากระบบ"
|
||||
push
|
||||
size="sm"
|
||||
v-close-popup
|
||||
@click="doLogout"
|
||||
/><!-- -->
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
|
|
@ -531,7 +572,13 @@ const clickDelete = (id: string) => {
|
|||
<q-list dense v-for="op in options" :key="op.label">
|
||||
<q-item clickable>
|
||||
<q-item-section avatar>
|
||||
<q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" />
|
||||
<q-avatar
|
||||
:color="op.color"
|
||||
text-color="white"
|
||||
:icon="op.icon"
|
||||
size="20px"
|
||||
font-size="12px"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">{{
|
||||
op.label
|
||||
|
|
@ -543,8 +590,16 @@ const clickDelete = (id: string) => {
|
|||
</div>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
<q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round
|
||||
@click="toggleBtnRight" aria-label="Menu">
|
||||
<q-btn
|
||||
size="13px"
|
||||
class="bg-blue-1"
|
||||
v-if="activeBtn() || activeBtnPlacement()"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
@click="toggleBtnRight"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
|
|
@ -552,47 +607,99 @@ const clickDelete = (id: string) => {
|
|||
<!-- end header -->
|
||||
|
||||
<!-- drawer -->
|
||||
<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260"
|
||||
:breakpoint="1023" :mini="miniState">
|
||||
<q-drawer
|
||||
side="left"
|
||||
class="text-white"
|
||||
style="background: #273238"
|
||||
v-model="drawerL"
|
||||
show-if-above
|
||||
:width="260"
|
||||
:breakpoint="1023"
|
||||
:mini="miniState"
|
||||
>
|
||||
<!-- ส่วนของเมนู mini -->
|
||||
<template v-slot:mini>
|
||||
<q-scroll-area class="fit mini-slot cursor-pointer">
|
||||
<q-toolbar class="q-py-md">
|
||||
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
|
||||
<q-img
|
||||
src="@/assets/logo.png"
|
||||
spinner-color="white"
|
||||
style="height: 32px; max-width: 32px"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-separator color="grey-9" />
|
||||
<!-- เมนูย่อย ตอนย่อ -->
|
||||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<q-item clickable v-ripple :active="link === menuItem.label" @click="link = menuItem.label"
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === menuItem.label"
|
||||
@click="link = menuItem.label"
|
||||
active-class="text-primary menuActiveMini text-weight-medium"
|
||||
v-if="menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6 || menuItem.key == 7 || menuItem.key == 8">
|
||||
v-if="
|
||||
menuItem.key == 3 ||
|
||||
menuItem.key == 5 ||
|
||||
menuItem.key == 6 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 8 ||
|
||||
menuItem.key == 9
|
||||
"
|
||||
>
|
||||
<div class="row items-center no-wrap">
|
||||
<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
|
||||
<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
|
||||
<q-icon
|
||||
name="mdi-dots-vertical"
|
||||
size="13px"
|
||||
color="grey-6"
|
||||
/>
|
||||
</div>
|
||||
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
||||
<q-tooltip
|
||||
anchor="center right"
|
||||
self="center left"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ menuItem.label }}
|
||||
</q-tooltip>
|
||||
<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
|
||||
<q-menu
|
||||
anchor="top right"
|
||||
self="top left"
|
||||
:offset="[5, 0]"
|
||||
style="background: #273238; z-index: 9000"
|
||||
>
|
||||
<q-list class="text-white q-py-sm">
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
|
||||
<div
|
||||
v-for="(subMenu, i) in menuItem.children"
|
||||
:key="i"
|
||||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<!-- เมนูย่อย 2 ชั้น -->
|
||||
<div v-if="menuItem.key == 5">
|
||||
<q-item dense clickable v-if="subMenu.key !== 5.1">
|
||||
<q-item-section>{{ subMenu.label }}
|
||||
<q-item-section
|
||||
>{{ subMenu.label }}
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right" />
|
||||
</q-item-section>
|
||||
|
||||
<q-menu anchor="top end" self="top start" :offset="[5, 0]"
|
||||
style="background: #273238; z-index: 9000">
|
||||
<q-menu
|
||||
anchor="top end"
|
||||
self="top start"
|
||||
:offset="[5, 0]"
|
||||
style="background: #273238; z-index: 9000"
|
||||
>
|
||||
<q-list class="text-white q-py-sm">
|
||||
<q-item v-for="subMenu2 in subMenu.children" :key="subMenu2.label"
|
||||
:to="{ name: `${subMenu2.path}` }" dense class="q-pl-md text-body2"
|
||||
active-class="text-primary active-item text-weight-medium" clickable>
|
||||
<q-item
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.label"
|
||||
:to="{ name: `${subMenu2.path}` }"
|
||||
dense
|
||||
class="q-pl-md text-body2"
|
||||
active-class="text-primary active-item text-weight-medium"
|
||||
clickable
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{
|
||||
subMenu2.label
|
||||
|
|
@ -603,9 +710,14 @@ const clickDelete = (id: string) => {
|
|||
</q-menu>
|
||||
</q-item>
|
||||
|
||||
<q-item v-else dense class="q-pl-md q-pr-xl text-body2"
|
||||
active-class="text-primary active-item text-weight-medium" clickable
|
||||
:to="{ name: `${subMenu.path}` }">
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="q-pl-md q-pr-xl text-body2"
|
||||
active-class="text-primary active-item text-weight-medium"
|
||||
clickable
|
||||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -613,9 +725,13 @@ const clickDelete = (id: string) => {
|
|||
</div>
|
||||
<!-- เมนูย่อย 1 ชั้น -->
|
||||
<div v-else>
|
||||
<q-item dense class="q-pl-md q-pr-xl text-body2"
|
||||
active-class="text-primary active-item text-weight-medium" clickable
|
||||
:to="{ name: `${subMenu.path}` }">
|
||||
<q-item
|
||||
dense
|
||||
class="q-pl-md q-pr-xl text-body2"
|
||||
active-class="text-primary active-item text-weight-medium"
|
||||
clickable
|
||||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -625,14 +741,25 @@ const clickDelete = (id: string) => {
|
|||
</q-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple :to="{ name: `${menuItem.path}` }" :active="link === menuItem.label"
|
||||
@click="link = menuItem.label" active-class="text-primary menuActiveMini" v-else>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:to="{ name: `${menuItem.path}` }"
|
||||
:active="link === menuItem.label"
|
||||
@click="link = menuItem.label"
|
||||
active-class="text-primary menuActiveMini"
|
||||
v-else
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="md" font-size="20px">
|
||||
<q-icon :name="menuItem.icon" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
||||
<q-tooltip
|
||||
anchor="center right"
|
||||
self="center left"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ menuItem.label }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
|
|
@ -647,9 +774,16 @@ const clickDelete = (id: string) => {
|
|||
<q-scroll-area class="fit">
|
||||
<q-toolbar class="q-py-md">
|
||||
<q-toolbar-title shrink class="row items-center no-wrap">
|
||||
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
|
||||
<q-img
|
||||
src="@/assets/logo.png"
|
||||
spinner-color="white"
|
||||
style="height: 40px; max-width: 40px"
|
||||
/>
|
||||
<div class="row q-ml-md">
|
||||
<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">
|
||||
<div
|
||||
style="color: #ffffff; letter-spacing: 1px"
|
||||
class="text-body2 text-weight-bolder"
|
||||
>
|
||||
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
|
||||
</div>
|
||||
<div class="text-caption text-white"> กรุงเทพมหานคร</div>
|
||||
|
|
@ -661,16 +795,27 @@ const clickDelete = (id: string) => {
|
|||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<!-- เมนูย่อย -->
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up" v-if="menuItem.key == 3 ||
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
class="menuSub"
|
||||
expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up"
|
||||
v-if="
|
||||
menuItem.key == 3 ||
|
||||
menuItem.key == 5 ||
|
||||
menuItem.key == 6 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 8
|
||||
">
|
||||
menuItem.key == 8 ||
|
||||
menuItem.key == 9
|
||||
"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<q-item-section avatar>
|
||||
<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
|
||||
<q-avatar
|
||||
:icon="menuItem.icon"
|
||||
size="md"
|
||||
font-size="20px"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ menuItem.label }}</q-item-section>
|
||||
</template>
|
||||
|
|
@ -678,20 +823,38 @@ const clickDelete = (id: string) => {
|
|||
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
||||
<div v-if="menuItem.key == 5">
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
||||
<q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1"
|
||||
class="expan2" dense>
|
||||
<q-item dense class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct" clickable
|
||||
v-for="subMenu2 in subMenu.children" :key="subMenu2.key" :to="{ name: `${subMenu2.path}` }">
|
||||
<q-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu.label"
|
||||
v-if="subMenu.key !== 5.1"
|
||||
class="expan2"
|
||||
dense
|
||||
>
|
||||
<q-item
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.key"
|
||||
:to="{ name: `${subMenu2.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400 subLabel">{{ subMenu2.label }}
|
||||
<q-item-label class="font-400 subLabel"
|
||||
>{{ subMenu2.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
<q-item v-else dense class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct" clickable
|
||||
:to="{ name: `${subMenu.path}` }">
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -699,9 +862,16 @@ const clickDelete = (id: string) => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- เมนูย่อย 1 ชั้น -->
|
||||
<q-item v-else dense class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct" clickable
|
||||
v-for="(subMenu, j) in menuItem.children" :key="j" :to="{ name: `${subMenu.path}` }">
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="(subMenu, j) in menuItem.children"
|
||||
:key="j"
|
||||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">{{
|
||||
subMenu.label
|
||||
|
|
@ -711,15 +881,26 @@ const clickDelete = (id: string) => {
|
|||
</q-expansion-item>
|
||||
|
||||
<!-- เมนูปกติ -->
|
||||
<q-item class="text-weight-medium menu" :active="activeMenu(menuItem.path)"
|
||||
active-class="text-primary active-item text-weight-bold menuActive" :to="{ name: `${menuItem.path}` }"
|
||||
clickable v-ripple dense exact v-else>
|
||||
<q-item
|
||||
class="text-weight-medium menu"
|
||||
:active="activeMenu(menuItem.path)"
|
||||
active-class="text-primary active-item text-weight-bold menuActive"
|
||||
:to="{ name: `${menuItem.path}` }"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
v-else
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="md" font-size="20px">
|
||||
<q-icon :name="menuItem.key === active
|
||||
? menuItem.activeIcon
|
||||
: menuItem.icon
|
||||
" />
|
||||
<q-icon
|
||||
:name="
|
||||
menuItem.key === active
|
||||
? menuItem.activeIcon
|
||||
: menuItem.icon
|
||||
"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
|
|
@ -734,16 +915,37 @@ const clickDelete = (id: string) => {
|
|||
</q-drawer>
|
||||
|
||||
<!-- drawer page registry/:id -->
|
||||
<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScroll()" v-model="drawerR" :width="220"
|
||||
:breakpoint="1023">
|
||||
<q-drawer
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-if="tabScroll()"
|
||||
v-model="drawerR"
|
||||
:width="220"
|
||||
:breakpoint="1023"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item v-for="(tabItem, index) in tabList" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTab(tabItem.tag)" clickable
|
||||
v-ripple dense exact @click="tagClick(tabItem.tag)">
|
||||
<q-item
|
||||
v-for="(tabItem, index) in tabList"
|
||||
:key="index"
|
||||
:id="'tab--' + tabItem.tag"
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="activeTab(tabItem.tag)"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
@click="tagClick(tabItem.tag)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
|
||||
}}</span></q-item-label>
|
||||
<q-item-label
|
||||
><q-icon size="11px" name="mdi-circle-medium" /><span
|
||||
class="q-pl-xs"
|
||||
>{{ tabItem.label }}</span
|
||||
></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -751,16 +953,37 @@ const clickDelete = (id: string) => {
|
|||
</q-drawer>
|
||||
|
||||
<!-- drawer page placement2/detail/:id -->
|
||||
<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScrollPlacement()" v-model="drawerR" :width="220"
|
||||
:breakpoint="1023">
|
||||
<q-drawer
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-if="tabScrollPlacement()"
|
||||
v-model="drawerR"
|
||||
:width="220"
|
||||
:breakpoint="1023"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item v-for="(tabItem, index) in tabListPlacement" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTabPlacement(tabItem.tag)"
|
||||
clickable v-ripple dense exact @click="tagClickPlacement(tabItem.tag)">
|
||||
<q-item
|
||||
v-for="(tabItem, index) in tabListPlacement"
|
||||
:key="index"
|
||||
:id="'tab--' + tabItem.tag"
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="activeTabPlacement(tabItem.tag)"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
@click="tagClickPlacement(tabItem.tag)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
|
||||
}}</span></q-item-label>
|
||||
<q-item-label
|
||||
><q-icon size="11px" name="mdi-circle-medium" /><span
|
||||
class="q-pl-xs"
|
||||
>{{ tabItem.label }}</span
|
||||
></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue