เพิ่มหัวข้อตัวเลข

This commit is contained in:
AnandaTon 2023-10-06 10:08:48 +07:00
parent cfbc431583
commit 0a507ce808

View file

@ -1,32 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"; import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"; import http from "@/plugins/http"
import config from "@/app.config"; import config from "@/app.config"
import type { QForm } from "quasar"; import type { QForm } from "quasar"
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const { const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
date2Thai, const router = useRouter()
dateToISO, const route = useRoute()
success, const myform = ref<QForm | null>(null)
messageError, const $q = useQuasar()
showLoader, const routeName = router.currentRoute.value.name
hideLoader, const id = ref<string>("")
fails, const fileDocDataUpload = ref<File[]>([])
} = mixin; const files = ref<any>()
const router = useRouter(); const tranferOrg = ref("")
const route = useRoute(); const dateCommand = ref<Date>(new Date())
const myform = ref<QForm | null>(null);
const $q = useQuasar();
const routeName = router.currentRoute.value.name;
const id = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const files = ref<any>();
const tranferOrg = ref("");
const dateCommand = ref<Date>(new Date());
const locationAbsence = ref<string>("") const locationAbsence = ref<string>("")
const levelStudy = ref<string>("") const levelStudy = ref<string>("")
const degree = ref<string>("") const degree = ref<string>("")
@ -35,445 +27,345 @@ const educational = ref<string>("")
const studyPeriod = ref<string>("") const studyPeriod = ref<string>("")
const country = ref<string>("") const country = ref<string>("")
const capital = ref<string>("") const capital = ref<string>("")
const tel = ref<number>(); const tel = ref<number>()
const detail = ref<string>(); const detail = ref<string>()
const Writeat = ref<string>(); const Writeat = ref<string>()
const dateLeaveStart = ref<Date>(new Date()); const dateLeaveStart = ref<Date>(new Date())
const dateLeaveEnd = ref<Date>(new Date()); const dateLeaveEnd = ref<Date>(new Date())
const dateTotal = ref<number>(); const dateTotal = ref<number>()
const noteReason = ref(""); const noteReason = ref("")
const nameFile = ref<string>(""); const nameFile = ref<string>("")
const model = ref(null); const model = ref(null)
const modelSpecific = ref(null); const modelSpecific = ref(null)
const options = ref([ const options = ref([
"ลาป่วย", "ลาป่วย",
"ลากิจส่วนตัว", "ลากิจส่วนตัว",
"ลาคลอดบุตร", "ลาคลอดบุตร",
"ลาไปช่วยเหลือภริยาที่คลอดบุตร", "ลาไปช่วยเหลือภริยาที่คลอดบุตร",
"ลาพักผ่อน", "ลาพักผ่อน",
"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ", "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ",
"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล", "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน", "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน",
"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ", "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ",
"ลาติดตามคู่สมรส", "ลาติดตามคู่สมรส",
"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ", "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ",
]); ])
const optionsSpecific = ref([ const optionsSpecific = ref(["ลาไปศึกษา", "ฝึกอบรม", "ปฎิบัติการวิจัย", "ดูงาน"])
"ลาไปศึกษา",
"ฝึกอบรม",
"ปฎิบัติการวิจัย",
"ดูงาน",
]);
const dataDetail = ref<any>({ const dataDetail = ref<any>({
datetext: "", datetext: "",
activeDate: new Date(), activeDate: new Date(),
createdAt: new Date(), createdAt: new Date(),
firstName: "", firstName: "",
id: "", id: "",
isActive: true, isActive: true,
lastName: "", lastName: "",
location: "", location: "",
organizationPositionOld: "", organizationPositionOld: "",
positionLevelOld: "", positionLevelOld: "",
positionNumberOld: "", positionNumberOld: "",
positionTypeOld: "", positionTypeOld: "",
prefix: "", prefix: "",
profileId: "", profileId: "",
reason: "", reason: "",
salary: 0, salary: 0,
sendDate: new Date(), sendDate: new Date(),
status: "", status: "",
statustext: "", statustext: "",
fullname: "", fullname: "",
}); })
const clickBack = () => { const clickBack = () => {
router.push(`/retire`); router.push(`/retire`)
}; }
const statusOrder = (val: boolean) => { const statusOrder = (val: boolean) => {
switch (val) { switch (val) {
case true: case true:
return "ยับยั้งการลาออก"; return "ยับยั้งการลาออก"
case false: case false:
return "อนุมัติการลาออก"; return "อนุมัติการลาออก"
} }
}; }
onMounted(() => { onMounted(() => {
// if (route.params.id !== undefined) { // if (route.params.id !== undefined) {
// id.value = route.params.id.toString() // id.value = route.params.id.toString()
// fectDataresign(id.value) // fectDataresign(id.value)
// } // }
}); })
const saveResing = () => { const saveAbsence = () => {
$q.dialog({ $q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก", title: "ยืนยันการยื่นข้อมูลลาออก",
message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?", message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
cancel: { cancel: {
flat: true, flat: true,
color: "negative", color: "negative",
}, },
persistent: true, persistent: true,
}) })
.onOk(() => { .onOk(() => {
// createFormresign() // createFormresign()
}) })
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}); .onDismiss(() => {})
}; }
const saveData = () => { const saveData = () => {
if(model.value !== 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'){ if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(1) console.log(1)
} else if (model.value === 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน') { } else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(2) console.log(2)
} }
router.push(`/`); router.push(`/leave`)
} }
</script> </script>
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center"> <div class="toptitle text-white col-12 row items-center">
<q-btn <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.push(`/leave`)" />
icon="mdi-arrow-left" <div>นใบลา</div>
unelevated </div>
round <q-form ref="myform" class="col-12">
dense <q-card bordered>
flat <div class="col-12 row q-col-gutter-md q-pa-md">
color="primary" <div class="col-xs-12 col-sm-12">
class="q-mr-sm" <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
@click="router.push(`/leave`)" <div class="q-pl-sm text-weight-bold text-dark">เลอกประเภทการลา</div>
/> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<div>นใบลา</div> <q-select dense class="q-ml-lg col-6" outlined v-model="model" :options="options" prefix="ประเภทใบลา :" />
</div> </div>
<q-form ref="myform" class="col-12"> <q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" />
<q-card bordered> <div class="q-pl-sm text-weight-bold text-dark" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน</div>
<div class="col-12 row q-col-gutter-md q-pa-md"> <div class="col-12 row q-pa-sm q-col-gutter-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">
<div class="col-xs-12 col-sm-12"> <q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" prefix="ประเภทใบลา :" />
<div class="q-pl-sm text-weight-bold text-dark"> </div>
เลอกประเภทการลา <q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-else />
</div> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" />
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="q-pl-sm text-weight-bold text-dark">กรอกขอม</div>
<q-select <q-card bordered class="q-pa-md bg-grey-1">
dense <div class="col-12 row q-pa-sm q-col-gutter-sm">
class="q-ml-lg col-6" <datepicker
outlined class="col-2"
v-model="model" menu-class-name="modalfix"
:options="options" v-model="dateLeaveStart"
prefix="ประเภทใบลา :" :locale="'th'"
/> autoApply
</div> borderless
<div :enableTimePicker="false"
class="q-pl-sm text-weight-bold text-dark" week-start="0"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" :readonly="routeName != 'addAbsence'"
> >
เลอกประเภทใบลาศกษา กอบรม ปฎการว หรอดงาน <template #year="{ year }">
</div> {{ year + 543 }}
<div </template>
class="col-12 row q-pa-sm q-col-gutter-sm" <template #year-overlay-value="{ value }">
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" {{ parseInt(value + 543) }}
> </template>
<q-select <template #trigger>
dense <q-input
class="q-ml-lg col-6" outlined
outlined dense
v-model="modelSpecific" hide-bottom-space
:options="optionsSpecific" :readonly="routeName != 'addAbsence'"
prefix="ประเภทใบลา :" class="full-width datepicker"
/> :model-value="dateLeaveStart != null ? date2Thai(dateLeaveStart) : null"
</div> :label="`${'วันที่เริ่ม'}`"
<div class="q-pl-sm text-weight-bold text-dark">กรอกขอม</div> :rules="[val => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`]"
<q-card bordered class="q-pa-md bg-grey-1"> >
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <template v-slot:prepend>
<datepicker <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
class="col-2" </template>
menu-class-name="modalfix" </q-input>
v-model="dateLeaveStart" </template>
:locale="'th'" </datepicker>
autoApply <datepicker
borderless class="col-2"
:enableTimePicker="false" menu-class-name="modalfix"
week-start="0" v-model="dateLeaveEnd"
:readonly="routeName != 'addAbsence'" :locale="'th'"
> autoApply
<template #year="{ year }"> borderless
{{ year + 543 }} :enableTimePicker="false"
</template> week-start="0"
<template #year-overlay-value="{ value }"> :readonly="routeName != 'addAbsence'"
{{ parseInt(value + 543) }} >
</template> <template #year="{ year }">
<template #trigger> {{ year + 543 }}
<q-input </template>
outlined <template #year-overlay-value="{ value }">
dense {{ parseInt(value + 543) }}
hide-bottom-space </template>
:readonly="routeName != 'addAbsence'" <template #trigger>
class="full-width datepicker" <q-input
:model-value=" outlined
dateLeaveStart != null dense
? date2Thai(dateLeaveStart) hide-bottom-space
: null :readonly="routeName != 'addAbsence'"
" class="full-width datepicker"
:label="`${'วันที่เริ่ม'}`" :model-value="dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null"
:rules="[ :label="`${'จนถึงวันที่'}`"
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`, :rules="[val => !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`]"
]" >
> <template v-slot:prepend>
<template v-slot:prepend> <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
<q-icon </template>
name="event" </q-input>
class="cursor-pointer" </template>
style="color: var(--q-primary)" </datepicker>
> <q-input
</q-icon> class="col-2"
</template> dense
</q-input> outlined
</template> type="number"
</datepicker> v-model="dateTotal"
<datepicker label="จำนวนวัน(บันทึกลง ก.พ.7)"
class="col-2" :readonly="routeName != 'addAbsence'"
menu-class-name="modalfix" :rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
v-model="dateLeaveEnd" />
:locale="'th'" <q-input class="col-3" dense outlined v-model="Writeat" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" />
autoApply <q-input
borderless class="col-3"
:enableTimePicker="false" dense
week-start="0" outlined
:readonly="routeName != 'addAbsence'" v-model="tel"
> mask="(###)-###-####"
<template #year="{ year }"> unmasked-value
{{ year + 543 }} label="หมายเลขโทรศัพท์ที่ติดต่อได้"
</template> :readonly="routeName != 'addAbsence'"
<template #year-overlay-value="{ value }"> :rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
{{ parseInt(value + 543) }} />
</template> <q-input
<template #trigger> class="col-6"
<q-input dense
outlined outlined
dense v-model="detail"
hide-bottom-space label="รายละเอียด"
:readonly="routeName != 'addAbsence'" :readonly="routeName != 'addAbsence'"
class="full-width datepicker" :rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
:model-value=" />
dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null <q-input
" class="col-6"
:label="`${'จนถึงวันที่'}`" dense
:rules="[ outlined
(val) => v-model="locationAbsence"
!!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`, label="สถาที่ติดต่อขณะลา"
]" :readonly="routeName != 'addAbsence'"
> :rules="[val => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
<template v-slot:prepend> />
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-2"
dense
outlined
type="number"
v-model="dateTotal"
label="จำนวนวัน(บันทึกลง ก.พ.7)"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<q-input
class="col-3"
dense
outlined
v-model="Writeat"
label="เขียนที่"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-input
class="col-3"
dense
outlined
v-model="tel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="routeName != 'addAbsence'"
:rules="[
(val) =>
!!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
class="col-6"
dense
outlined
v-model="detail"
label="รายละเอียด"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
<q-input
class="col-6"
dense
outlined
v-model="locationAbsence"
label="สถาที่ติดต่อขณะลา"
:readonly="routeName != 'addAbsence'"
:rules="[
(val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`,
]"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="levelStudy"
outlined label="ระดับที่ขอลาศึกษา"
v-model="levelStudy" :readonly="routeName != 'addAbsence'"
label="ระดับที่ขอลาศึกษา" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="degree"
outlined label="ชื่อปริญญา/ประกาศนียบัตร"
v-model="degree" :readonly="routeName != 'addAbsence'"
label="ชื่อปริญญา/ประกาศนียบัตร" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="major"
outlined label="สาขาวิชาเอก/หลักสูตร/วิชา"
v-model="major" :readonly="routeName != 'addAbsence'"
label="สาขาวิชาเอก/หลักสูตร/วิชา" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="educational"
outlined label="ณ สถานศึกษา"
v-model="educational" :readonly="routeName != 'addAbsence'"
label="ณ สถานศึกษา" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="studyPeriod"
outlined label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
v-model="studyPeriod" :readonly="routeName != 'addAbsence'"
label="ระยะเวลาในการศึกษาตลอดหลักสูตร" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="country"
outlined label="ประเทศ"
v-model="country" :readonly="routeName != 'addAbsence'"
label="ประเทศ" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="capital"
outlined label="ด้วยทุน"
v-model="capital" :readonly="routeName != 'addAbsence'"
label="ด้วยทุน" />
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-8" class="col-8"
v-if=" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน' dense
" outlined
dense v-model="noteReason"
outlined label="ที่มาของหลักสูตร"
v-model="noteReason" :readonly="routeName != 'addAbsence'"
label="ที่มาของหลักสูตร" />
:readonly="routeName != 'addAbsence'"
/>
<q-file <q-file v-model="files" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
v-model="files" <template v-slot:prepend>
dense <q-icon name="attach_file" color="primary" />
label="เอกสารประกอบ" </template>
outlined </q-file>
use-chips
multiple
class="q-pl-sm col-6"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="routeName != 'addAbsence'"> <div class="col-12 row" v-if="routeName != 'addAbsence'">
<div <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
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>
<div class="q-pl-sm text-weight-bold text-dark"> <q-card bordered flat class="full-width">
เอกสารเพมเต <q-list separator>
</div> <q-item v-for="file in files" :key="file.key" class="q-my-xs">
</div> <q-item-section>
<q-card bordered flat class="full-width"> <q-item-label class="full-width ellipsis">
<q-list separator> {{ file.fileName }}
<q-item </q-item-label>
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-label caption> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-card> </q-card>
</div> </div>
</div> </div>
</q-card> </q-card>
</div> </div>
<!-- <div class="row col-12 q-pa-md" v-if="routeName != 'addAbsence'"> <!-- <div class="row col-12 q-pa-md" v-if="routeName != 'addAbsence'">
<q-space /> <q-space />
<q-btn <q-btn
v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'" v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
@ -486,26 +378,20 @@ const saveData = () => {
:disable="tranferOrg == '' && noteReason == ''" :disable="tranferOrg == '' && noteReason == ''"
/> />
</div> --> </div> -->
</div> </div>
<q-separator /> <q-separator />
<div class="row col-12 q-pa-md"> <div class="row col-12 q-pa-md">
<q-space /> <q-space />
<q-btn <q-btn unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="saveData" />
unelevated </div>
dense </q-card>
class="q-px-md items-center btnBlue" </q-form>
label="บันทึก" </div>
@click="saveData" </div>
/>
</div>
</q-card>
</q-form>
</div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.btnBlue { .btnBlue {
background-color: #016987; background-color: #016987;
color: #fff; color: #fff;
} }
</style> </style>