ui รายละเอียดเรื่องลาออก

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-21 18:05:15 +07:00
parent f12f64313a
commit f91bb62275

View file

@ -86,7 +86,7 @@ async function onSubmit() {
const formData = new FormData();
formData.append("Location", tranferOrg.value);
formData.append("SendDate", dateToISO(dateCommand.value));
// formData.append("SendDate", dateToISO(dateCommand.value));
formData.append(
"ActiveDate",
dateLeave.value !== null ? dateToISO(dateLeave.value) : ""
@ -186,6 +186,7 @@ onMounted(() => {
<div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
<div v-else>รายละเอียดเรื่องลาออก</div>
</div>
<q-form
ref="myform"
class="col-12"
@ -194,397 +195,7 @@ onMounted(() => {
@validation-success="onSubmit"
>
<q-card bordered>
<div class="col-12 row q-col-gutter-sm q-pa-md">
<div class="col-xs-12 col-sm-12">
<div class="col-12 row q-col-gutter-sm">
<q-input
:class="
routeName !== 'AddRetire'
? 'col-md-8 col-xs-12'
: 'col-md-8 col-xs-12 inputgreen'
"
class=""
dense
outlined
v-model="tranferOrg"
hide-bottom-space
label="สถานที่ยื่นขอลาออกจากราชการ"
:readonly="routeName != 'AddRetire'"
:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
/>
<datepicker
:class="
routeName !== 'AddRetire'
? 'col-md-2 col-xs-12'
: 'col-md-2 col-xs-12 inputgreen'
"
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
readonly
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
readonly
dense
hide-bottom-space
class="full-width"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
:class="
routeName !== 'AddRetire'
? 'col-md-2 col-xs-12'
: 'col-md-2 col-xs-12 inputgreen'
"
menu-class-name="modalfix"
v-model="dateLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName != 'AddRetire'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:readonly="routeName != 'AddRetire'"
class="full-width"
:model-value="
dateLeave != null ? date2Thai(dateLeave) : null
"
:label="`${'วันที่ขอลาออกจากราชการ'}`"
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
:class="
routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
"
dense
outlined
v-model="noteReason"
label="เหตุผลที่ลาออกจากราชการ"
type="textarea"
hide-bottom-space
:readonly="routeName != 'AddRetire'"
:rules="[
(val: string) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
]"
/>
<div class="col-12 row" v-if="routeName == 'AddRetire'">
<q-file
v-model="files"
class="col-xs-12 col-sm-12 inputgreen"
outlined
dense
lazy-rules
hide-bottom-space
accept=".pdf"
:rules="[(val: string) => !!val || 'กรุณาเลือกเอกสารเพิ่มเติม']"
label="เอกสารเพิ่มเติม"
>
<template v-slot:prepend>
<q-icon name="attach_file" /> </template
></q-file>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered flat class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพมเต
</div>
</div>
<q-list class="col-12">
<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-space />
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(file.pathName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของการเจาหนาทของหนวยงาน
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.officerReject !== null
? statusOrder(dataDetail.officerReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">
นสดทายทบย
</div>
<div class="col-12 text-detail">
{{
dataDetail.officerRejectDate !== null
? date2Thai(dataDetail.officerRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">
ความคดเหนและเหตผล
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.officerReject === false"
>
{{
dataDetail.officerApproveReason !== null
? dataDetail.officerApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.officerReject === true"
>
{{
dataDetail.officerRejectReason !== null
? dataDetail.officerRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของผงคบบญชา
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderReject !== null
? statusOrder(dataDetail.commanderReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">
นสดทายทบย
</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderRejectDate !== null
? date2Thai(dataDetail.commanderRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">
ความคดเหนและเหตผล
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === false"
>
{{
dataDetail.commanderApproveReason !== null
? dataDetail.commanderApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === true"
>
{{
dataDetail.commanderRejectReason !== null
? dataDetail.commanderRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของผอำนาจ
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchReject !== null
? statusOrder(dataDetail.oligarchReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">
นสดทายทบย
</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchRejectDate !== null
? date2Thai(dataDetail.oligarchRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">
ความคดเหนและเหตผล
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.oligarchReject == false"
>
{{
dataDetail.oligarchApproveReason !== null
? dataDetail.oligarchApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-else-if="dataDetail.oligarchReject == true"
>
{{
dataDetail.oligarchRejectReason !== null
? dataDetail.oligarchRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<Workflow :id="id" sys-name="RETIREMENT_RESIFNATION" />
</div>
</div>
</div>
</div>
<q-separator v-if="routeName !== 'AddRetire'" />
<q-card-actions
align="right"
v-if="routeName !== 'AddRetire'"
class="q-px-md"
>
<q-card-actions align="right" v-if="routeName !== 'AddRetire'">
<q-btn
v-if="
dataDetail.status !== 'DELETE' &&
@ -594,13 +205,378 @@ onMounted(() => {
checkCancleLeave
"
unelevated
class="q-px-md items-center"
color="orange"
label="ยกเลิกการลาออก"
@click="cancelResing"
:disable="tranferOrg == '' && noteReason == ''"
/>
</q-card-actions>
<div
class="col-12 row q-col-gutter-sm q-pa-md"
style="padding-top: 0px"
>
<q-input
:class="
routeName !== 'AddRetire'
? 'col-md-9 col-xs-12'
: 'col-md-9 col-xs-12 inputgreen'
"
class=""
dense
outlined
v-model="tranferOrg"
hide-bottom-space
label="สถานที่ยื่นขอลาออกจากราชการ"
:readonly="routeName != 'AddRetire'"
:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
/>
<!-- <datepicker
:class="
routeName !== 'AddRetire'
? 'col-md-2 col-xs-12'
: 'col-md-2 col-xs-12 inputgreen'
"
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
readonly
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
readonly
dense
hide-bottom-space
class="full-width"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker> -->
<datepicker
:class="
routeName !== 'AddRetire'
? 'col-md-3 col-xs-12'
: 'col-md-3 col-xs-12 inputgreen'
"
menu-class-name="modalfix"
v-model="dateLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName != 'AddRetire'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:readonly="routeName != 'AddRetire'"
class="full-width"
:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
:label="`${'วันที่ขอลาออกจากราชการ'}`"
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
:class="
routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
"
dense
outlined
v-model="noteReason"
label="เหตุผลที่ลาออกจากราชการ"
type="textarea"
hide-bottom-space
:readonly="routeName != 'AddRetire'"
:rules="[
(val: string) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
]"
/>
<div class="col-12 row" v-if="routeName == 'AddRetire'">
<q-file
v-model="files"
class="col-xs-12 col-sm-12 inputgreen"
outlined
dense
lazy-rules
hide-bottom-space
accept=".pdf"
:rules="[(val: string) => !!val || 'กรุณาเลือกเอกสารเพิ่มเติม']"
label="เอกสารเพิ่มเติม"
>
<template v-slot:prepend>
<q-icon name="attach_file" /> </template
></q-file>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered flat class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพมเต
</div>
</div>
<q-list class="col-12">
<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-space />
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(file.pathName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของการเจาหนาทของหนวยงาน
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.officerReject !== null
? statusOrder(dataDetail.officerReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{
dataDetail.officerRejectDate !== null
? date2Thai(dataDetail.officerRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.officerReject === false"
>
{{
dataDetail.officerApproveReason !== null
? dataDetail.officerApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.officerReject === true"
>
{{
dataDetail.officerRejectReason !== null
? dataDetail.officerRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของผงคบบญชา
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderReject !== null
? statusOrder(dataDetail.commanderReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderRejectDate !== null
? date2Thai(dataDetail.commanderRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === false"
>
{{
dataDetail.commanderApproveReason !== null
? dataDetail.commanderApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === true"
>
{{
dataDetail.commanderRejectReason !== null
? dataDetail.commanderRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของผอำนาจ
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchReject !== null
? statusOrder(dataDetail.oligarchReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchRejectDate !== null
? date2Thai(dataDetail.oligarchRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.oligarchReject == false"
>
{{
dataDetail.oligarchApproveReason !== null
? dataDetail.oligarchApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-else-if="dataDetail.oligarchReject == true"
>
{{
dataDetail.oligarchRejectReason !== null
? dataDetail.oligarchRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<q-separator v-if="routeName == 'AddRetire'" />
<q-card-actions
align="right"
@ -618,6 +594,10 @@ onMounted(() => {
</q-card-actions>
</q-card>
</q-form>
<div class="col-12 row q-mt-sm" v-if="routeName != 'AddRetire'">
<Workflow :id="id" sys-name="RETIREMENT_RESIFNATION" />
</div>
</div>
</div>