ปรับ text และ validate บรรจุ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-28 15:23:22 +07:00
parent 2b99a1459e
commit 0875ee189b
6 changed files with 503 additions and 159 deletions

View file

@ -1,11 +1,15 @@
divdivdiv<script setup lang="ts">
divdivdiv
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import CurrencyInput from "@/components/CurruncyInput.vue";
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
import type { appointmentData,ResponseData } from "@/modules/05_placement/interface/response/AppointMent";
import type {
appointmentData,
ResponseData,
} from "@/modules/05_placement/interface/response/AppointMent";
import type { QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -16,10 +20,10 @@ const router = useRouter();
const mixin = useCounterMixin();
const appointment = ref<appointmentData>({
citizenId:"",
prefixId:"",
firstname:"",
lastname:""
citizenId: "",
prefixId: "",
firstname: "",
lastname: "",
});
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
@ -52,7 +56,6 @@ const title = ref<ResponseTitle>({
positionTypeOld: "",
});
// id
const fecthappointmentByid = async () => {
showLoader();
@ -62,12 +65,14 @@ const fecthappointmentByid = async () => {
const data = res.data.result;
appointment.value = data;
profileId.value = data.profileId;
title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
data.lastname ?? "-"
}`;
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
title.value.positionLevelOld = data.positionLevelOld ?? "-";
title.value.positionTypeOld = data.positionTypeOld ?? "-";
(status.value = data.status),
educationOld.value = data.educationOld ?? "-";
(educationOld.value = data.educationOld ?? "-");
organizationPositionOld.value = data.organizationPositionOld;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
@ -131,10 +136,10 @@ const putAppointment = async () => {
});
};
const cancel = () => {
edit.value = false
fecthappointmentByid()
myForm.value?.resetValidation()
}
edit.value = false;
fecthappointmentByid();
myForm.value?.resetValidation();
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
@ -148,8 +153,16 @@ onMounted(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.push(`/appoint-promote`)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/appoint-promote`)"
/>
รายละเอยดการแตงต-เลอน {{ title.fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
@ -158,8 +171,15 @@ onMounted(async () => {
{{ title.fullname }}
</div>
<q-space />
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
@click="router.push(`/registry/${profileId}`)"
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
@ -204,14 +224,36 @@ onMounted(async () => {
<q-space />
<div v-if="status !== 'DONE' && status !== 'REPORT'">
<div class="q-gutter-sm" v-if="!edit">
<q-btn outline color="primary" dense icon-right="mdi-file-edit-outline"
class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
style="width: 80px" @click="clickSave" />
<q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px"
@click="cancel()" />
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="clickSave"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="cancel()"
/>
</div>
</div>
</div>
@ -219,74 +261,146 @@ onMounted(async () => {
<q-form ref="myForm">
<div class="row col-12 q-pa-md">
<div class="col-12">
<div class="text-weight-bold text-grey">การศกษา</div>
<div class="text-weight-bold">การศกษา</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
:label="`${'วุฒิการศึกษา'}`" type="text" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="educationOld"
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
hide-bottom-space
:label="`${'วุฒิการศึกษา'}`"
type="text"
/>
</div>
</div>
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row q-pa-md items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
<div class="text-weight-bold">ตำแหนงและหนวยงานเด</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space :label="`${'ระดับ'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space :label="`${'เลขที่'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
<CurrencyInput
v-model="salary"
label="เงินเดือน"
:edit="edit"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'"
autoApply :enableTimePicker="false" week-start="0" >
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
: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 :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
:readonly="!edit" :model-value="date !== null ? date2Thai(date) : null"
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:readonly="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`" >
hide-bottom-space
:label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"
:style="edit? 'color: var(--q-primary)': 'color: var(--q-grey)' ">
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
@ -295,9 +409,19 @@ onMounted(async () => {
</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>

View file

@ -6,7 +6,10 @@ import { useCounterMixin } from "@/stores/mixin";
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
import type { ResponseDataDetail } from "@/modules/05_placement/interface/response/Transfer";
import type { OtherdataInterface,resApiData } from "@/modules/05_placement/interface/response/OhterMain";
import type {
OtherdataInterface,
resApiData,
} from "@/modules/05_placement/interface/response/OhterMain";
import type { QForm } from "quasar";
import http from "@/plugins/http";
@ -76,7 +79,7 @@ const fecthOther = async () => {
.get(config.API.otherByid(paramsId.toString()))
.then((res: resApiData) => {
const data = res.data.result;
Otherdata.value = data
Otherdata.value = data;
avatar.value = data.avatar ?? "";
title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
@ -85,19 +88,23 @@ const fecthOther = async () => {
responseData.value.profileId = data.profileId;
responseData.value.createdAt = data.createdAt;
responseData.value.id = data.id ?? "";
responseData.value.organizationPositionOld = data.organizationPositionOld ?? "";
responseData.value.organizationPositionOld =
data.organizationPositionOld ?? "";
responseData.value.positionLevelOld = data.positionLevelOld ?? "";
responseData.value.positionNumberOld = data.positionNumberOld ?? "";
responseData.value.positionTypeOld = data.positionTypeOld ?? "";
responseData.value.reason = data.reason ?? "";
responseData.value.status = data.status ?? "";
responseData.value.fullname = `${data.prefix ?? "-"}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
responseData.value.fullname = `${data.prefix ?? "-"}${
data.firstname ?? "-"
} ${data.lastname ?? "-"}`;
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.amountOld ?? "";
date.value = data.positionDate !== null ? new Date(data.positionDate) : null;
date.value =
data.positionDate !== null ? new Date(data.positionDate) : null;
reason.value = data.reason ?? "";
})
.catch((e) => {
@ -124,7 +131,7 @@ const clickEdit = async () => {
});
}
};
//-----(update)-----//
const saveOther = async () => {
let data = {
@ -155,7 +162,7 @@ const saveOther = async () => {
const cancel = () => {
edit.value = false;
fecthOther();
myForm.value?.resetValidation()
myForm.value?.resetValidation();
};
const getClass = (val: boolean) => {
return {
@ -172,8 +179,16 @@ onMounted(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.push(`/other`)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/other`)"
/>
รายละเอยดรายการอนๆ {{ responseData.fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
@ -182,8 +197,15 @@ onMounted(async () => {
{{ responseData.fullname }}
</div>
<q-space />
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${responseData.profileId}`)" />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
@click="router.push(`/registry/${responseData.profileId}`)"
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
@ -232,14 +254,36 @@ onMounted(async () => {
"
>
<div class="q-gutter-sm" v-if="!edit">
<q-btn outline color="primary" dense icon-right="mdi-file-edit-outline"
class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
style="width: 80px" @click="clickEdit" />
<q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
style="width: 80px" @click="cancel()" />
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="clickEdit"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="cancel()"
/>
</div>
</div>
</div>
@ -249,60 +293,122 @@ onMounted(async () => {
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
<div class="text-weight-bold">ตำแหนงและหนวยงานเด</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space :label="`${'ระดับ'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space :label="`${'เลขที่'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<CurruncyInput v-model="salary" label="เงินเดือน" :edit="edit"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
<CurruncyInput
v-model="salary"
label="เงินเดือน"
:edit="edit"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'"
autoApply :enableTimePicker="false" week-start="0" >
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
: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 :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
:label="`${'ตั้งแต่วัน'}`" >
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space
:label="`${'ตั้งแต่วัน'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"
:style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
@ -311,9 +417,18 @@ onMounted(async () => {
</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>

View file

@ -901,7 +901,7 @@ onMounted(async () => {
/>
</div>
<div class="col-xs-12">
<div class="text-weight-bold text-grey">
<div class="text-weight-bold">
ตำแหนงและหนวยงานเด
</div>
</div>
@ -986,6 +986,8 @@ onMounted(async () => {
currency: 'THB',
}"
:label="`${'เงินเดือน'}`"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
/>
</div>
<div class="col-xs-12">
@ -997,7 +999,6 @@ onMounted(async () => {
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"

View file

@ -257,9 +257,7 @@ onMounted(async () => {
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
<div class="text-weight-bold">ตำแหนงและหนวยงานเด</div>
</div>
<div class="col-12">
<q-input
@ -332,6 +330,7 @@ onMounted(async () => {
:edit="edit"
:options="{ currency: 'THB' }"
:label="`${'เงินเดือน'}`"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
/>
</div>
</div>
@ -459,7 +458,6 @@ onMounted(async () => {
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"

View file

@ -13,7 +13,7 @@ import type { QTableProps, QForm } from "quasar";
import type {
TypeFile,
ResponseDataDetail,
rowFile
rowFile,
} from "@/modules/05_placement/interface/response/Transfer";
const $q = useQuasar();
@ -275,10 +275,10 @@ const saveData = async () => {
});
};
const cancel = () => {
edit.value = false
getData()
myForm.value?.resetValidation()
}
edit.value = false;
getData();
myForm.value?.resetValidation();
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
@ -537,9 +537,7 @@ onMounted(async () => {
<div class="row bg-white q-col-gutter-y-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
<div class="text-weight-bold">ตำแหนงและหนวยงานเด</div>
</div>
<div class="col-12">
<q-input
@ -609,6 +607,8 @@ onMounted(async () => {
currency: 'THB',
}"
:label="`${'เงินเดือน'}`"
:rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
/>
</div>
</div>
@ -687,7 +687,6 @@ onMounted(async () => {
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"

View file

@ -23,7 +23,6 @@ const {
success,
} = mixin;
const myForm = ref<QForm | null>(null);
const fullname = ref<string>("");
const id = ref<string>("");
@ -75,8 +74,7 @@ const getData = async () => {
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
})
.catch((e) => {
})
.catch((e) => {})
.finally(() => {
hideLoader();
});
@ -106,7 +104,7 @@ const conditionSave = async () => {
const cancelBtn = () => {
edit.value = !edit;
getData();
myForm.value?.resetValidation()
myForm.value?.resetValidation();
};
const saveData = async () => {
const body = {
@ -143,16 +141,31 @@ onMounted(async () => {
<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.push(`/help-government`)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/help-government`)"
/>
รายละเอยดการชวยราชการ {{ fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
<q-space />
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
@click="router.push(`/registry/${profileId}`)"
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
@ -196,15 +209,37 @@ onMounted(async () => {
</div>
<q-space />
<div class="q-gutter-sm" v-if="!edit">
<q-btn outline color="primary" dense icon-right="mdi-file-edit-outline"
class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit"
v-if="!(status == 'REPORT' || status == 'DONE')" />
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
v-if="!(status == 'REPORT' || status == 'DONE')"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px"
@click="conditionSave" />
<q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
style="width: 80px" @click="cancelBtn" />
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="conditionSave"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="cancelBtn"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
@ -213,40 +248,81 @@ onMounted(async () => {
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
<div class="text-weight-bold">ตำแหนงและหนวยงานเด</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space :label="`${'ตำแหน่ง'}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง'}`"
type="textarea"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-4 row ">
<div class="col-xs-6 col-sm-4 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
:label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
hide-bottom-space
:label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-4 row ">
<div class="col-xs-6 col-sm-4 row">
<div class="col-12">
<datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateStart" :locale="'th'"
autoApply :enableTimePicker="false" week-start="0" >
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateStart"
: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 :class="getClass(edit)" :outlined="edit" dense :readonly="!edit"
lazy-rules :borderless="!edit" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
:model-value=" dateStart !== null ? date2Thai(dateStart) : null "
hide-bottom-space :label="`${'ตั้งแต่วัน'}`" >
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:readonly="!edit"
lazy-rules
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
:model-value="
dateStart !== null ? date2Thai(dateStart) : null
"
hide-bottom-space
:label="`${'ตั้งแต่วัน'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"
:style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
@ -254,21 +330,43 @@ onMounted(async () => {
</datepicker>
</div>
</div>
<div class="col-xs-6 col-sm-4 row ">
<div class="col-xs-6 col-sm-4 row">
<div class="col-12">
<datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateEnd" :locale="'th'"
autoApply :enableTimePicker="false" week-start="0" >
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateEnd"
: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 :readonly="!edit" :class="getClass(edit)" :outlined="edit" dense
lazy-rules :borderless="!edit" :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ถึงวันที่'}`" >
<q-input
:readonly="!edit"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space
:label="`${'ถึงวันที่'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"
:style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' "
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
@ -278,9 +376,18 @@ onMounted(async () => {
</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>