hrms-bangkok/hrms-recruit
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ css และดีไซน์หน้า กรอกข้อมูลสมัครสอบ

Browse source
This commit is contained in:
Tanyalak 2023-03-29 16:39:45 +07:00
parent dcad2fcb07
commit c299af578f
14 changed files with 1261 additions and 1378 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Table.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="q-pb-sm row"> <div class="q-pb-sm row items-center">
<!-- --> <!-- -->
<HeaderTop <HeaderTop
v-model:edit="editBtn" v-model:edit="editBtn"
@ -207,7 +207,7 @@ const add = () => {
} }
.q-table thead tr { .q-table thead tr {
background: #ecebeb; background: #a6b8c313;
} }
.q-table thead tr th { .q-table thead tr th {

10
src/components/top.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="flex items-center"> <div class="flex items-center q-pb-md">
<div class="flex items-center" v-if="header != ''"> <div class="flex items-center" v-if="header != ''">
<q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" /> <q-icon :name="icon" size="1.5em" color="accent" class="q-mr-md" />
<div class="text-weight-medium text-dark col-12 row items-center text-header"> <div class="text-weight-medium text-dark col-12 row items-center text-subtitle1">
{{ header }} {{ header }}
</div> </div>
</div> </div>
@ -21,9 +21,9 @@
<q-tooltip>แก้ไขข้อมูล</q-tooltip> <q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn> --> </q-btn> -->
<q-btn <q-btn
size="12px" size="15px"
flat flat
round dense
v-if="edit && !editOnly" v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'public'" :color="!edit ? 'grey-7' : 'public'"
@click="save" @click="save"

8
src/modules/01_exam/components/ExamForm.vue
View file

@ -41,8 +41,7 @@
</q-tabs> </q-tabs>
</template> </template>
</q-splitter> --> </q-splitter> -->
<div class="text-center q-pt-sm">
<div>
<q-checkbox <q-checkbox
v-model="acceptTermOfUse" v-model="acceptTermOfUse"
:disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit" :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
@ -77,9 +76,11 @@
:disable="statusEdit" :disable="statusEdit"
/> --> /> -->
<q-btn <q-btn
color="primary" color="blue"
class="q-ml-md" class="q-ml-md"
label="บันทึกข้อมูล" label="บันทึกข้อมูล"
outline
icon="mdi-content-save"
@click="okModalConfirm" @click="okModalConfirm"
v-if="status === 'register' || status === 'rejectRegister'" v-if="status === 'register' || status === 'rejectRegister'"
:disable="!acceptTermOfUse || statusEdit" :disable="!acceptTermOfUse || statusEdit"
@ -87,6 +88,7 @@
<q-btn <q-btn
color="primary" color="primary"
class="q-ml-md" class="q-ml-md"
icon="mdi-check"
label="สมัครสอบ" label="สมัครสอบ"
@click="okModalConfirm" @click="okModalConfirm"
v-if="status === 'register' || status === 'rejectRegister'" v-if="status === 'register' || status === 'rejectRegister'"

23
src/modules/01_exam/components/Form/Address.vue
View file

@ -1,6 +1,5 @@
<!-- card ข้อมูลที่อยู่ --> <!-- card ข้อมูลที่อยู่ -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop <HeaderTop
v-model:edit="edit" v-model:edit="edit"
header="ข้อมูลที่อยู่" header="ข้อมูลที่อยู่"
@ -14,7 +13,7 @@
/> />
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
<q-form ref="myform"> <q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-xs-12"> <div class="col-xs-12">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
@ -31,7 +30,7 @@
/> />
<!-- :filled="(status == 'register' || status == 'rejectRegister')" --> <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -50,7 +49,7 @@
@update:model-value="(value) => selectProvince(value, '1')" @update:model-value="(value) => selectProvince(value, '1')"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -69,7 +68,7 @@
@update:model-value="(value) => selectDistrict(value, '1')" @update:model-value="(value) => selectDistrict(value, '1')"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -88,7 +87,7 @@
@update:model-value="(value) => selectSubDistrict(value, '1')" @update:model-value="(value) => selectSubDistrict(value, '1')"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
@ -100,8 +99,7 @@
:label="`${'รหัสไปรษณีย์'}`" :label="`${'รหัสไปรษณีย์'}`"
/> />
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
<label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label> <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
<q-radio <q-radio
v-model="addressData.same" v-model="addressData.same"
@ -138,7 +136,7 @@
:label="`${'ที่อยู่ปัจจุบัน'}`" :label="`${'ที่อยู่ปัจจุบัน'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -157,7 +155,7 @@
@update:model-value="(value) => selectProvince(value, '2')" @update:model-value="(value) => selectProvince(value, '2')"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -176,7 +174,7 @@
@update:model-value="(value) => selectDistrict(value, '2')" @update:model-value="(value) => selectDistrict(value, '2')"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -195,7 +193,7 @@
@update:model-value="(value) => selectSubDistrict(value, '2')" @update:model-value="(value) => selectSubDistrict(value, '2')"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
@ -209,7 +207,6 @@
</div> </div>
</div> </div>
</q-form> </q-form>
</q-card>
<!-- <q-dialog :model-value="modalConsend" persistent> <!-- <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />

114
src/modules/01_exam/components/Form/Career.vue
View file

@ -1,58 +1,56 @@
<!-- tab ประวัติการทำงาน/ฝึกงาน --> <!-- tab ประวัติการทำงาน/ฝึกงาน -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md"> <q-form ref="myForm">
<q-form ref="myForm"> <Table
<Table :rows="rows"
:rows="rows" :columns="columns"
:columns="columns" :filter="filter"
:filter="filter" :visible-columns="visibleColumns"
:visible-columns="visibleColumns" v-model:inputfilter="filter"
v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
v-model:inputvisible="visibleColumns" v-model:editvisible="edit"
v-model:editvisible="edit" :add="clickAdd"
:add="clickAdd" :edit="clickEdit"
:edit="clickEdit" :cancel="clickCancel"
:cancel="clickCancel" :addData="false"
:addData="false" :editData="status == 'register' || status == 'rejectRegister'"
:editData="status == 'register' || status == 'rejectRegister'" name="ประวัติการทำงาน/ฝึกงาน"
name="ประวัติการทำงาน/ฝึกงาน" icon="mdi-briefcase"
icon="mdi-briefcase" >
> <template #columns="props">
<template #columns="props"> <q-tr :props="props">
<q-tr :props="props"> <q-td
<q-td v-for="col in props.cols"
v-for="col in props.cols" :key="col.name"
:key="col.name" :props="props"
:props="props" @click="selectData(props)"
@click="selectData(props)" class="cursor-pointer"
class="cursor-pointer" >
> <div v-if="col.name == 'salary'" class="">
<div v-if="col.name == 'salary'" class=""> {{ col.value.toLocaleString('en-US') }}
{{ col.value.toLocaleString('en-US') }} </div>
</div> <div v-else-if="col.name == 'duration'" class="">
<div v-else-if="col.name == 'duration'" class=""> {{ dateThaiRange(col.value) }}
{{ dateThaiRange(col.value) }} </div>
</div> <div v-else class="">
<div v-else class=""> {{ col.value }}
{{ col.value }} </div>
</div> </q-td>
</q-td> <q-td auto-width v-if="edit === true">
<q-td auto-width v-if="edit === true"> <q-btn
<q-btn color="red"
color="red" flat
flat dense
dense round
round size="14px"
size="14px" icon="mdi-trash-can-outline"
icon="mdi-trash-can-outline" @click="checkDelete(props.row)"
@click="checkDelete(props.row)" />
/> </q-td>
</q-td> </q-tr>
</q-tr> </template>
</template> </Table>
</Table> </q-form>
</q-form>
</q-card>
<!-- popup Edit window--> <!-- popup Edit window-->
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="width: 600px"> <q-card style="width: 600px">
@ -61,7 +59,7 @@
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
@ -75,7 +73,7 @@
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
@ -89,7 +87,7 @@
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
@ -104,7 +102,7 @@
type="number" type="number"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<datepicker <datepicker
:readonly="!edit" :readonly="!edit"
v-model="duration" v-model="duration"
@ -131,7 +129,7 @@
:model-value="dateThaiRange(duration)" :model-value="dateThaiRange(duration)"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> <q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>

136
src/modules/01_exam/components/Form/Document.vue
View file

@ -1,78 +1,70 @@
<!-- card อัปโหลดเอกสาร --> <!-- card อัปโหลดเอกสาร -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md"> <HeaderTop
<div class="col-12"> v-model:edit="edit"
<HeaderTop header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
v-model:edit="edit" icon="mdi-file-document"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)" :addData="true"
icon="mdi-file-document" :editOnly="true"
:addData="true" :cancel="cancelData"
:editOnly="true" :editData="status == 'register' || status == 'rejectRegister'"
:cancel="cancelData" />
:editData="status == 'register' || status == 'rejectRegister'"
/>
</div>
<div class="col-12">
<div v-if="edit" class="row justify-center q-pa-md">
<div class="col-4">
<q-input
class="q-my-sm"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
color="blue"
type="file"
flat
auto-upload
:factory="fileUpload"
class="full-width"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
/>
</div>
</div>
<q-separator class="q-mt-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.name }}
</q-item-label>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label> <div v-if="edit" class="row justify-center row col-12">
</q-item-section> <q-input
<q-item-section top side> class="q-mt-sm col-12"
<div class="q-gutter-sm"> :outlined="edit"
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline"> dense
<q-tooltip>ดาวน์โหลด</q-tooltip> lazy-rules
</q-btn> :readonly="!edit"
<q-btn :borderless="!edit"
size="12px" v-model="name"
flat :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
dense :label="`${'ชื่อเอกสาร'}`"
round />
color="red" <q-uploader
icon="mdi-delete-outline" color="blue"
v-if="edit" type="file"
> flat
<q-tooltip>ลบไฟล์</q-tooltip> auto-upload
</q-btn> :factory="fileUpload"
</div> class="full-width"
</q-item-section> :max-size="10000000"
</q-item> accept=".jpg,.png,.pdf,.csv,.doc"
</q-list> bordered
</q-card> label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
</div> />
</div>
<q-card bordered flat class="full-width q-my-md">
<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.name }}
</q-item-label>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
>
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card> </q-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

100
src/modules/01_exam/components/Form/Education.vue
View file

@ -1,55 +1,53 @@
<!-- tab ประวัติการศึกษา --> <!-- tab ประวัติการศึกษา -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md"> <q-form ref="myForm">
<q-form ref="myForm"> <Table
<Table :rows="rows"
:rows="rows" :columns="columns"
:columns="columns" :filter="filter"
:filter="filter" :visible-columns="visibleColumns"
:visible-columns="visibleColumns" v-model:inputfilter="filter"
v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
v-model:inputvisible="visibleColumns" v-model:editvisible="edit"
v-model:editvisible="edit" :add="clickAdd"
:add="clickAdd" :edit="clickEdit"
:edit="clickEdit" :cancel="clickCancel"
:cancel="clickCancel" :addData="false"
:addData="false" :editData="status == 'register' || status == 'rejectRegister'"
:editData="status == 'register' || status == 'rejectRegister'" name="ประวัติการศีกษา"
name="ประวัติการศีกษา" icon="mdi-school"
icon="mdi-school" >
> <template #columns="props">
<template #columns="props"> <q-tr :props="props">
<q-tr :props="props"> <q-td
<q-td v-for="col in props.cols"
v-for="col in props.cols" :key="col.name"
:key="col.name" :props="props"
:props="props" @click="selectData(props)"
@click="selectData(props)" class="cursor-pointer"
class="cursor-pointer" >
> <div v-if="col.name == 'duration'" class="">
<div v-if="col.name == 'duration'" class=""> {{ dateThaiRange(col.value) }}
{{ dateThaiRange(col.value) }} </div>
</div> <div v-else class="">
<div v-else class=""> {{ col.value }}
{{ col.value }} </div>
</div> </q-td>
</q-td> <q-td auto-width v-if="edit === true">
<q-td auto-width v-if="edit === true"> <q-btn
<q-btn color="red"
color="red" flat
flat dense
dense round
round size="14px"
size="14px" icon="mdi-trash-can-outline"
icon="mdi-trash-can-outline" @click="checkDelete(props.row)"
@click="checkDelete(props.row)" />
/> </q-td>
</q-td> </q-tr>
</q-tr> </template>
</template> </Table>
</Table> </q-form>
</q-form>
</q-card>
<!-- popup Edit window--> <!-- popup Edit window-->
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="width: 600px"> <q-card style="width: 600px">
@ -147,7 +145,7 @@
:model-value="dateThaiRange(duration)" :model-value="dateThaiRange(duration)"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> <q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>

510
src/modules/01_exam/components/Form/Family.vue
View file

@ -1,262 +1,260 @@
<!-- card ข้อมูลครอบครัว --> <!-- card ข้อมูลครอบครัว -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark"> <HeaderTop
<HeaderTop v-model:edit="edit"
v-model:edit="edit" header="ข้อมูลครอบครัว"
header="ข้อมูลครอบครัว" icon="mdi-account-group"
icon="mdi-account-group" :save="saveData"
:save="saveData" :addData="true"
:addData="true" :editOnly="false"
:editOnly="false" :cancel="cancelData"
:cancel="cancelData" :editData="status == 'register' || status == 'rejectRegister'"
:editData="status == 'register' || status == 'rejectRegister'" :disable="statusEdit"
:disable="statusEdit" />
/> <!-- :changeBtn="changeBtn" -->
<!-- :changeBtn="changeBtn" --> <q-form ref="myform" class="col-12">
<q-form ref="myform" class="col-12"> <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm"> <label class="text-weight-bold">• คู่สมรส</label>
<label class="text-weight-bold">• คู่สมรส</label> <q-radio
<q-radio v-model="familyData.same"
v-model="familyData.same" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="1"
val="1" label="มี"
label="มี" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" @update:model-value="selectRadio"
@update:model-value="selectRadio" />
/> <q-radio
<q-radio v-model="familyData.same"
v-model="familyData.same" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="0"
val="0" label="ไม่มี"
label="ไม่มี" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" @update:model-value="selectRadio"
@update:model-value="selectRadio" />
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
v-model="familyData.prefixIdC"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameC"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameC"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationC"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityC"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-12 text-weight-bold">• บิดา</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
v-model="familyData.prefixIdM"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameM"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameM"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationM"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityM"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-12 text-weight-bold">• มารดา</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
v-model="familyData.prefixIdF"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameF"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameF"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationF"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityF"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
</div> </div>
</q-form> <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
</q-card> <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
v-model="familyData.prefixIdC"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameC"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameC"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationC"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityC"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-12 text-weight-bold">• บิดา</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
v-model="familyData.prefixIdM"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameM"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameM"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationM"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityM"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-12 text-weight-bold">• มารดา</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
v-model="familyData.prefixIdF"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameF"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameF"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationF"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityF"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
</div>
</q-form>
<!-- <q-dialog :model-value="modalConsend" persistent> <!-- <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />

705
src/modules/01_exam/components/Form/Information.vue
View file

@ -1,357 +1,356 @@
<!-- card ข้อมูลส่วนตัว --> <!-- card ข้อมูลส่วนตัว -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md"> <HeaderTop
<HeaderTop v-model:edit="edit"
v-model:edit="edit" header="ข้อมูลส่วนตัว"
header="ข้อมูลส่วนตัว" icon="mdi-account"
icon="mdi-account" :save="saveData"
:save="saveData" :addData="true"
:addData="true" :editOnly="false"
:editOnly="false" :cancel="cancelData"
:cancel="cancelData" :editData="status == 'register' || status == 'rejectRegister'"
:editData="status == 'register' || status == 'rejectRegister'" :disable="statusEdit"
:disable="statusEdit" />
/> <!-- :changeBtn="changeBtn" -->
<!-- :changeBtn="changeBtn" --> <q-form ref="myform" class="col-12 row q-col-gutter-x-sm">
<q-form ref="myform" class="col-12 row"> <div class="row col-xs-12 col-sm-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="col-xs-6 col-sm-2 col-md-2"> <q-select
<q-select :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]" :outlined="status == 'register' || status == 'rejectRegister'"
:outlined="status == 'register' || status == 'rejectRegister'" dense
dense lazy-rules
lazy-rules v-model="informaData.prefixId"
v-model="informaData.prefixId" emit-value
emit-value map-options
map-options option-label="name"
option-label="name" :options="prefixOptions"
:options="prefixOptions" option-value="id"
option-value="id" :label="`${'คำนำหน้า'}`"
:label="`${'คำนำหน้า'}`" />
/> </div>
</div> <div class="col-xs-12 col-sm-5 col-md-5">
<div class="col-xs-6 col-sm-5 col-md-5"> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" :outlined="status == 'register' || status == 'rejectRegister'"
:outlined="status == 'register' || status == 'rejectRegister'" dense
dense lazy-rules
lazy-rules :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="informaData.firstname"
v-model="informaData.firstname" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`"
:label="`${'ชื่อ'}`" />
/> </div>
</div> <div class="col-xs-12 col-sm-5 col-md-5">
<div class="col-xs-6 col-sm-5 col-md-5"> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" :outlined="status == 'register' || status == 'rejectRegister'"
:outlined="status == 'register' || status == 'rejectRegister'" dense
dense lazy-rules
lazy-rules :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="informaData.lastname"
v-model="informaData.lastname" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`"
:label="`${'นามสกุล'}`" />
/> </div>
</div> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-3 col-md-3"> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" :outlined="status == 'register' || status == 'rejectRegister'"
:outlined="status == 'register' || status == 'rejectRegister'" dense
dense lazy-rules
lazy-rules :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="informaData.nationality"
v-model="informaData.nationality" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :label="`${'สัญชาติ'}`"
:label="`${'สัญชาติ'}`" />
/> </div>
</div> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-3 col-md-3"> <datepicker
<datepicker v-model="informaData.birthDate"
v-model="informaData.birthDate" :locale="'th'"
:locale="'th'" autoApply
autoApply :enableTimePicker="false"
:enableTimePicker="false" week-start="0"
week-start="0" :max-date="new Date()"
:max-date="new Date()" :disabled="!(status == 'register' || status == 'rejectRegister')"
:disabled="!(status == 'register' || status == 'rejectRegister')" >
> <template #year="{ year }">
<template #year="{ year }"> {{ year + 543 }}
{{ year + 543 }} </template>
</template> <template #year-overlay-value="{ value }">
<template #year-overlay-value="{ value }"> {{ parseInt(value + 543) }}
{{ parseInt(value + 543) }} </template>
</template> <template #trigger>
<template #trigger> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" :outlined="status == 'register' || status == 'rejectRegister'"
:outlined="status == 'register' || status == 'rejectRegister'" dense
dense lazy-rules
lazy-rules :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :model-value="
:model-value=" informaData.birthDate == null ? null : date2Thai(informaData.birthDate)
informaData.birthDate == null ? null : date2Thai(informaData.birthDate) "
" :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]" :label="`${'วัน/เดือน/ปี เกิด'}`"
:label="`${'วัน/เดือน/ปี เกิด'}`" >
> <template v-slot:prepend>
<template v-slot:prepend> <q-icon
<q-icon name="mdi-calendar-outline"
name="event" class="cursor-pointer"
class="cursor-pointer" size="22px"
:style=" :style="
status == 'register' || status == 'rejectRegister' status == 'register' || status == 'rejectRegister'
? 'color: var(--q-primary)' ? 'color: var(--q-primary)'
: 'color: var(--q-grey)' : 'color: var(--q-grey)'
" "
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
readonly readonly
borderless borderless
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'" :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)" :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
:label="`${'อายุ'}`" :label="`${'อายุ'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.relationship" v-model="informaData.relationship"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="relationshipOptions" :options="relationshipOptions"
option-value="id" option-value="id"
:label="`${'สถานภาพ'}`" :label="`${'สถานภาพ'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
type="tel" type="tel"
counter counter
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.cardid" v-model="informaData.cardid"
maxlength="13" maxlength="13"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`, (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ถูกต้อง'}` (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ถูกต้อง'}`
]" ]"
label="เลขบัตรประจำตัวประชาชน" label="เลขบัตรประจำตัวประชาชน"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.provinceId" v-model="informaData.provinceId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="provinceOptions" :options="provinceOptions"
option-value="id" option-value="id"
:label="`${'ออกให้ ณ จังหวัด'}`" :label="`${'ออกให้ ณ จังหวัด'}`"
@update:model-value="(value) => selectProvince(value)" @update:model-value="(value) => selectProvince(value)"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<!-- <q-input <!-- <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.cardid" v-model="informaData.cardid"
:rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
label="ออกให้ ณ อำเภอ" label="ออกให้ ณ อำเภอ"
/> --> /> -->
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.districtId" v-model="informaData.districtId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="districtOptions" :options="districtOptions"
option-value="id" option-value="id"
:label="`${'ออกให้ ณ อำเภอ'}`" :label="`${'ออกให้ ณ อำเภอ'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<datepicker <datepicker
v-model="informaData.cardIdDate" v-model="informaData.cardIdDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:max-date="new Date()" :max-date="new Date()"
:disabled="!(status == 'register' || status == 'rejectRegister')" :disabled="!(status == 'register' || status == 'rejectRegister')"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:model-value=" :model-value="
informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate) informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
" "
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
:label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`" :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="mdi-calendar-outline"
class="cursor-pointer" class="cursor-pointer"
:style=" :style="
status == 'register' || status == 'rejectRegister' status == 'register' || status == 'rejectRegister'
? 'color: var(--q-primary)' ? 'color: var(--q-primary)'
: 'color: var(--q-grey)' : 'color: var(--q-grey)'
" "
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
lazy-rules
type="tel"
maxlength="10"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
]"
:label="`${'โทรศัพท์'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
lazy-rules
type="tel"
maxlength="10"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.phone"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
]"
:label="`${'โทรศัพท์มือถือ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
:outlined="false"
dense
lazy-rules
:readonly="true"
:borderless="true"
v-model="informaData.email"
label="E-mail address"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.knowledge"
label="ความรู้ความสามารถพิเศษ"
type="textarea"
/>
</div>
</div> </div>
<div class="row col-2 justify-center q-pt-md"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="containerimage row justify-center"> <q-input
<q-file :outlined="status == 'register' || status == 'rejectRegister'"
borderless dense
v-model="fileData" counter
stack-label lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" type="tel"
@update:model-value="pickFile" maxlength="10"
> :class="getClass(status == 'register' || status == 'rejectRegister')"
<q-img src="@/assets/avatar_user.jpg" class="col-12"> :readonly="!(status == 'register' || status == 'rejectRegister')"
<div class="overlay" v-if="status == 'register' || status == 'rejectRegister'"> :borderless="!(status == 'register' || status == 'rejectRegister')"
<q-icon name="mdi-camera" /> v-model="informaData.tel"
<br />อัปเดต :rules="[
</div> (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
</q-img> (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
</q-file> ]"
</div> :label="`${'โทรศัพท์'}`"
<div class="col-12 text-center" v-if="disabledPic"> />
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
<q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
</q-btn>
</div>
</div> </div>
</q-form> <div class="col-xs-12 col-sm-3 col-md-3">
</q-card> <q-input
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
lazy-rules
type="tel"
maxlength="10"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.phone"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
]"
:label="`${'โทรศัพท์มือถือ'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input
:class="getClass(false)"
:outlined="false"
dense
lazy-rules
:readonly="true"
:borderless="true"
v-model="informaData.email"
label="E-mail address"
/>
</div>
</div>
<div class="row col-xs-12 col-sm-2 justify-center">
<div class="containerimage row justify-center">
<q-file
borderless
v-model="fileData"
stack-label
:readonly="!(status == 'register' || status == 'rejectRegister')"
@update:model-value="pickFile"
>
<q-img src="@/assets/avatar_user.jpg" class="col-12">
<div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
<q-icon name="mdi-camera" />
<br />อัปเดต
</div>
</q-img>
</q-file>
</div>
<div class="col-12 text-center" v-if="disabledPic">
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
<q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
</q-btn>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.knowledge"
label="ความรู้ความสามารถพิเศษ"
type="textarea"
/>
</div>
</q-form>
<!-- <q-dialog :model-value="modalConsend" persistent> <!-- <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />
@ -576,9 +575,9 @@ const getClass = (val: boolean) => {
width: 160px; width: 160px;
height: 170px; height: 170px;
padding: 1%; padding: 1%;
border-radius: 3px; border-radius: 8px;
border: solid 2px rgba(168, 168, 168, 0.055) !important; border: solid 2px rgba(168, 168, 168, 0.055) !important;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
} }
.overlay { .overlay {
@ -600,4 +599,8 @@ const getClass = (val: boolean) => {
.containerimage:hover .overlay { .containerimage:hover .overlay {
opacity: 1; opacity: 1;
} }
.q-field__bottom{
padding: 5px 10px 0px 0px;
}
</style> </style>

492
src/modules/01_exam/components/Form/Occupation.vue
View file

@ -1,255 +1,249 @@
<!-- card อาชีพ --> <!-- card อาชีพ -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md"> <HeaderTop
<HeaderTop v-model:edit="edit"
v-model:edit="edit" header="อาชีพ"
header="อาชีพ" icon="mdi-briefcase"
icon="mdi-briefcase" :save="saveData"
:save="saveData" :addData="true"
:addData="true" :editOnly="false"
:editOnly="false" :cancel="cancelData"
:cancel="cancelData" :editData="status == 'register' || status == 'rejectRegister'"
:editData="status == 'register' || status == 'rejectRegister'" :disable="statusEdit"
:disable="statusEdit" />
/> <!-- :changeBtn="changeBtn" -->
<!-- :changeBtn="changeBtn" --> <q-form ref="myform">
<q-form ref="myform"> <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="col-12 row q-pb-lg">
<div class="col-12 row"> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" hide-bottom-space
hide-bottom-space dense
dense lazy-rules
lazy-rules type="textarea"
type="textarea" autogrow
autogrow :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="occupationData.official"
v-model="occupationData.official" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :disable="
:disable=" occupationData.status !== 'official' ||
occupationData.status !== 'official' || !(status == 'register' || status == 'rejectRegister')
!(status == 'register' || status == 'rejectRegister') "
" >
> <template v-slot:before>
<template v-slot:before> <q-radio
<q-radio v-model="occupationData.status"
v-model="occupationData.status" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="official"
val="official" label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" size="md"
size="md" style="font-size: 14px; color: black"
style="font-size: 14px; color: black" />
/> </template>
</template> </q-input>
</q-input> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" hide-bottom-space
hide-bottom-space dense
dense lazy-rules
lazy-rules type="textarea"
type="textarea" autogrow
autogrow :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="occupationData.personnel"
v-model="occupationData.personnel" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :disable="
:disable=" occupationData.status !== 'personnel' ||
occupationData.status !== 'personnel' || !(status == 'register' || status == 'rejectRegister')
!(status == 'register' || status == 'rejectRegister') "
" >
> <template v-slot:before>
<template v-slot:before> <q-radio
<q-radio v-model="occupationData.status"
v-model="occupationData.status" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="personnel"
val="personnel" label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" size="md"
size="md" style="font-size: 14px; color: black"
style="font-size: 14px; color: black" />
/> </template>
</template> </q-input>
</q-input> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" hide-bottom-space
hide-bottom-space dense
dense lazy-rules
lazy-rules type="textarea"
type="textarea" autogrow
autogrow :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="occupationData.officialsOther"
v-model="occupationData.officialsOther" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :disable="
:disable=" occupationData.status !== 'officialsOther' ||
occupationData.status !== 'officialsOther' || !(status == 'register' || status == 'rejectRegister')
!(status == 'register' || status == 'rejectRegister') "
" >
> <template v-slot:before>
<template v-slot:before> <q-radio
<q-radio v-model="occupationData.status"
v-model="occupationData.status" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="officialsOther"
val="officialsOther" label="ข้าราชการประเภทอื่น ตำแหน่ง"
label="ข้าราชการประเภทอื่น ตำแหน่ง" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" size="md"
size="md" style="font-size: 14px; color: black"
style="font-size: 14px; color: black" />
/> </template>
</template> </q-input>
</q-input> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" hide-bottom-space
hide-bottom-space dense
dense lazy-rules
lazy-rules type="textarea"
type="textarea" autogrow
autogrow :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="occupationData.employee"
v-model="occupationData.employee" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :disable="
:disable=" occupationData.status !== 'employee' ||
occupationData.status !== 'employee' || !(status == 'register' || status == 'rejectRegister')
!(status == 'register' || status == 'rejectRegister') "
" >
> <template v-slot:before>
<template v-slot:before> <q-radio
<q-radio v-model="occupationData.status"
v-model="occupationData.status" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="employee"
val="employee" label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" size="md"
size="md" style="font-size: 14px; color: black"
style="font-size: 14px; color: black" />
/> </template>
</template> </q-input>
</q-input> <q-radio
<q-radio v-model="occupationData.status"
v-model="occupationData.status" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="studying"
val="studying" label="กำลังศึกษาต่อ"
label="กำลังศึกษาต่อ" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" size="md"
size="md" style="font-size: 14px; color: black"
style="font-size: 14px; color: black" />
/> <q-input
<q-input :class="getClass(status == 'register' || status == 'rejectRegister')"
:class="getClass(status == 'register' || status == 'rejectRegister')" hide-bottom-space
hide-bottom-space dense
dense lazy-rules
lazy-rules type="textarea"
type="textarea" autogrow
autogrow :readonly="!(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="occupationData.other"
v-model="occupationData.other" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :disable="
:disable=" occupationData.status !== 'other' ||
occupationData.status !== 'other' || !(status == 'register' || status == 'rejectRegister')
!(status == 'register' || status == 'rejectRegister') "
" >
> <template v-slot:before>
<template v-slot:before> <q-radio
<q-radio v-model="occupationData.status"
v-model="occupationData.status" checked-icon="task_alt"
checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
unchecked-icon="panorama_fish_eye" val="other"
val="other" label="อื่นๆ"
label="อื่นๆ" dense
dense :disable="!(status == 'register' || status == 'rejectRegister')"
:disable="!(status == 'register' || status == 'rejectRegister')" size="md"
size="md" style="font-size: 14px; color: black"
style="font-size: 14px; color: black" />
/> </template>
</template> </q-input>
</q-input>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
maxlength="10"
lazy-rules
type="tel"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
]"
:label="`${'โทรศัพท์'}`"
/>
</div>
</div> </div>
</q-form> <div class="col-xs-12 col-sm-3 col-md-3">
</q-card> <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
maxlength="10"
lazy-rules
type="tel"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
]"
:label="`${'โทรศัพท์'}`"
/>
</div>
</div>
</q-form>
<!-- <q-dialog :model-value="modalConsend" persistent> <!-- <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />

66
src/modules/01_exam/components/Form/Profile.vue
View file

@ -1,44 +1,70 @@
<!-- tab ข้อมูลส่วนบุคคล --> <!-- tab ข้อมูลส่วนบุคคล -->
<template> <template>
<Information <div class="q-px-sm">
:prefixOptions="prefixOptions" <Information
:relationshipOptions="relationshipOptions" :prefixOptions="prefixOptions"
:provinceOptions="provinceOptions" :relationshipOptions="relationshipOptions"
v-model:statusEdit="statusEdit" :provinceOptions="provinceOptions"
:notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit"
:status="status" :notiNoEdit="notiNoEdit"
/> :status="status"
<Address />
:provinceOptions="provinceOptions" </div>
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" <q-separator class="q-my-lg bg-gray" size="5px" />
:status="status" <div class="q-px-sm">
/> <Address
<Family :provinceOptions="provinceOptions"
:prefixOptions="prefixOptions" v-model:statusEdit="statusEdit"
v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit"
:notiNoEdit="notiNoEdit" :status="status"
:status="status" />
/> </div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Family
:prefixOptions="prefixOptions"
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:status="status"
/>
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" /> <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Education <Education
:loader="loader" :loader="loader"
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
/> />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Career <Career
:loader="loader" :loader="loader"
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
/> />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Document <Document
:loader="loader" :loader="loader"
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
/> />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'

175
src/modules/01_exam/views/ExamDetail.vue
View file

@ -1,68 +1,65 @@
<!-- page:detail page รายการสอบทั้งหมด --> <!-- page:detail page รายการสอบทั้งหมด -->
<template> <template>
<q-toolbar class="q-py-sm q-px-md bg-grey-2"> <q-toolbar class="q-pa-sm text-center">
<q-toolbar-title class="toptitle text-dark col-12 row items-center"> <q-toolbar-title class="text-dark text-weight-medium">
{{ tittle }} {{ tittle }}
<q-space /> <!-- <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" />
</q-toolbar-title> </q-toolbar-title>
</q-toolbar> </q-toolbar>
<q-card flat class=""> <q-stepper
<div class="justify-center"> v-model="step"
<q-stepper ref="stepper"
class="col-2" alternative-labels
v-model="step" header-nav
ref="stepper" animated
header-nav done-icon="check"
animated :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
done-color="positive" >
active-color="blue-7" <!-- <q-step
inactive-color="positive" :done="step > 1"
done-icon="mdi-check-bold" :disable="stepRaw < 1"
alternative-labels :name="1"
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'" title="อ่านคำชี้แจง"
> :icon="
<!-- <q-step stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
:done="step > 1" "
:disable="stepRaw < 1" >
:name="1" <ExamDetail :fetchStep="fetchStep" :status="status" />
title="อ่านคำชี้แจง" </q-step> -->
:icon=" <q-step
stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil' :done="step > 2"
" :disable="stepRaw < 2"
> :name="2"
<ExamDetail :fetchStep="fetchStep" :status="status" /> title="ข้อมูลสมัครสอบ"
</q-step> --> :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-account'"
<q-step >
:done="step > 2" <q-card bordered class="q-pa-lg">
:disable="stepRaw < 2" <ExamForm :fetchStep="fetchStep" :status="status" />
:name="2" </q-card>
title="ข้อมูลสมัครสอบ" </q-step>
:icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'" <q-step
> :done="step > 3"
<ExamForm :fetchStep="fetchStep" :status="status" /> :disable="stepRaw < 3"
</q-step> :name="3"
<q-step title="ชำระค่าธรรมเนียม"
:done="step > 3" :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
:disable="stepRaw < 3" >
:name="3" <q-card bordered class="q-pa-lg">
title="ชำระค่าธรรมเนียมการสอบ" <ExamPayment :fetchStep="fetchStep" :status="status" />
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'" </q-card>
> </q-step>
<ExamPayment :fetchStep="fetchStep" :status="status" /> <q-step
</q-step> :done="step > 4"
<q-step :disable="stepRaw < 4"
:done="step > 4" :name="4"
:disable="stepRaw < 4" title="สำเร็จ"
:name="4" :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
title="สำเร็จ" >
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-pencil'" <q-card bordered class="q-pa-lg">
> <ExamFinished :fetchStep="fetchStep" :status="status" />
<ExamFinished :fetchStep="fetchStep" :status="status" /> </q-card>
</q-step> </q-step>
</q-stepper> </q-stepper>
</div>
</q-card>
<q-dialog :model-value="modalConsend" persistent> <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />
@ -95,6 +92,8 @@ const status = ref<string>('register')
const modalConsend = ref<boolean>(false) const modalConsend = ref<boolean>(false)
onMounted(async () => { onMounted(async () => {
stepRaw.value = 2
step.value = 2
await fetchPeriodExam() await fetchPeriodExam()
await candidateCheck() await candidateCheck()
}) })
@ -199,3 +198,59 @@ const doLogout = () => {
}) })
} }
</script> </script>
<style>
.q-stepper {
box-shadow: none;
background: transparent !important;
}
.q-stepper--horizontal .q-stepper__step-inner {
padding: 0px;
}
.q-stepper__header--alternative-labels .q-stepper__tab {
min-height: 0px;
padding: 1.5% 0% 1.5% 0%;
}
.q-stepper__header--border {
border-bottom: none;
}
.q-stepper__dot {
min-width: 35px;
height: 35px;
width: 35px;
font-size: 20px;
}
.q-stepper__title{
width: 100px;
}
.q-stepper__tab--done .q-stepper__title{
color: #62a00b;
}
.q-stepper__tab--done .q-stepper__dot{
color: #95D710;
border: 1px solid #62a00b;
}
.q-stepper__tab--active .q-stepper__title{
color: #318BAE;
}
.q-stepper__tab--active .q-stepper__dot{
color: #1CB4EA;
border: 1px solid #218ab393;
}
.q-stepper__tab--disabled .q-stepper__title{
color: #92B4C8;
}
.q-stepper__tab--disabled .q-stepper__dot{
background: #DEF2FC !important;
border: 1px solid #92b4c876;
}
.q-stepper__tab--disabled .q-stepper__dot .q-icon{
color: #7692a3d0;
}
.q-stepper--horizontal .q-stepper__line:before, .q-stepper--horizontal .q-stepper__line:after{
background: #92b4c847;
}
</style>

8
src/style/quasar-variables.sass
View file

@ -2,7 +2,7 @@
$primary: #02A998 $primary: #02A998
$secondary: #016987 $secondary: #016987
$accent: #9C27B0 $accent: #7692a3d0
// $dark: #1D1D1D // $dark: #1D1D1D
$dark: #35473C $dark: #35473C
@ -12,6 +12,12 @@ $negative: #C10015
$info: #31CCEC $info: #31CCEC
$warning: #F2C037 $warning: #F2C037
$gray: #92b4c847
.gray
color: $gray !important
.bg-gray
background: $gray !important
$add: #00aa86 $add: #00aa86
.text-add .text-add
color: $add !important color: $add !important

288
src/views/MainLayout.vue
View file

@ -64,214 +64,33 @@ const doLogout = () => {
<!-- แบบเก่า design แรก --> <!-- แบบเก่า design แรก -->
<!-- <q-layout view="lHh Lpr lff"> --> <!-- <q-layout view="lHh Lpr lff"> -->
<!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด --> <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด -->
<q-layout view="lHh LpR lff"> <q-layout view="lHh LpR lff" class="bgColor text-dark">
<!-- header --> <!-- header -->
<q-header flat class="bg-grey-2 text-dark" height-hint="7"> <q-header flat class="bg-white text-white row justify-center header" height-hint="7">
<q-toolbar style="padding: 0 2%"> <q-toolbar style="padding:0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
<!-- <q-btn <q-toolbar-title shrink class="row items-center no-wrap">
size="13px" <q-btn flat class="bg-white" dense round>
class="bg-grey-3" <q-avatar size="35px">
flat <img src="../assets/logo.png" />
dense </q-avatar>
round </q-btn>
@click="toggleBtnLeft" <div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
aria-label="Menu" <div class="col-12 textline1">
> ระบบทรัพยากรบุคคล
<q-icon </div>
:name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" <div class="text-caption textline2">
size="20px" กรุงเทพมหานคร
color="grey-7" </div>
/> </div>
</q-btn> --> </q-toolbar-title>
<q-space/>
<q-space /> <q-btn v-if="$q.screen.gt.xs" class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" size="12px" label="ออกจากระบบ" flat v-close-popup @click="doLogout" />
<q-btn v-else class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" flat v-close-popup @click="doLogout" />
<!-- Search --> </q-toolbar>
<!-- <q-input dense rounded standout v-model="text" placeholder="ค้นหา"> </q-header>
<template v-slot:prepend>
<q-icon name="mdi-magnify" size="20px" color="grey-7" />
</template>
</q-input> -->
<!-- <q-btn class="bg-grey-3" flat dense round>
<q-icon name="mdi-magnify" size="20px" color="grey-7" />
</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-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-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>
</div>
<q-list style="min-width: 300px" v-for="n in notiList" :key="n.id">
<q-item v-ripple class="mytry" dense>
<q-item-section avatar top style="min-width: 40px">
<q-avatar color="primary" size="22px" text-color="white">
<span class="text-weight-medium text-uppercase">{{ n.sender }}</span>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label caption class="text-black">{{ n.body }}</q-item-label>
<q-item-label caption class="row items-center text-grey-7">{{
n.timereceive
}}</q-item-label>
</q-item-section>
<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"></q-btn>
</q-item>
<q-separator color="grey-2" />
</q-list>
</q-menu>
</q-btn>
<div class="row items-center no-wrap">
<q-btn-dropdown size="md" dropdown-color="grey" flat>
<template v-slot:label>
<q-item v-close-popup class="q-pa-none">
<q-item-section avatar>
<q-avatar color="grey-3">
<q-icon name="mdi-account" size="22px" color="grey-7" />
</q-avatar>
</q-item-section>
<q-item-section class="text-left">
<q-item-label class="text-caption text-weight-medium">{{
fullname
}}</q-item-label>
<q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label>
</q-item-section>
</q-item>
</template>
<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" />
</q-avatar>
<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"
/>
</div>
<div class="column col-12">
<q-separator />
<div class="column q-pb-md justify-center">
<div class="text-overline text-grey q-px-md q-pt-sm">เลือกโหมด</div>
<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-item-section>
<q-item-section class="q-py-sm">{{ op.label }}</q-item-section>
</q-item>
</q-list>
</div>
</div>
</div>
</q-btn-dropdown>
</div> -->
</q-toolbar>
</q-header>
<!-- end header --> <!-- end header -->
<q-page-container class="row justify-center">
<!-- drawer --> <q-page style="padding:1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
<!-- <q-drawer
side="left"
bordered
class="text-white"
style="background: #273238"
v-model="drawerL"
show-if-above
:width="260"
:breakpoint="1023"
:mini="miniState"
>
<q-scroll-area class="fit">
<q-toolbar class="q-py-md" v-if="miniState !== true">
<q-toolbar-title v-if="$q.screen.gt.xs" shrink class="row items-center no-wrap">
<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"
>
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
</div>
<div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
</div>
</q-toolbar-title>
</q-toolbar>
<q-toolbar class="q-py-md" v-else>
<q-img
src="@/assets/logo.png"
spinner-color="white"
style="height: 32px; max-width: 32px"
/>
</q-toolbar>
<q-separator inset color="grey-9" />
<q-list padding>
<div v-for="(menuItem, index) in menuList" :key="index">
<q-item
class="text-weight-medium menu"
active-class="text-primary active-item text-weight-bold menuActive"
:to="{ name: `${menuItem.path}` }"
:active="activeMenu(menuItem.path)"
clickable
v-ripple
dense
exact
>
<q-item-section avatar>
<q-avatar size="md" font-size="20px">
<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label>{{ menuItem.label }}</q-item-label>
</q-item-section>
</q-item>
</div>
</q-list>
</q-scroll-area>
</q-drawer> -->
<q-page-container class="bg-grey-2">
<q-page style="padding: 0 2%">
<router-view :key="$route.fullPath" /> <router-view :key="$route.fullPath" />
</q-page> </q-page>
</q-page-container> </q-page-container>
@ -279,35 +98,13 @@ const doLogout = () => {
</template> </template>
<style> <style>
.menu { .bgColor {
padding-bottom: 5px; /* background-image: url("../assets/bg.png");
padding-top: 5px; background-size: cover;
border-radius: 0 100px 100px 0; background-size: 100%; */
margin-right: 4%; background: #F6F9FA;
} }
.menuActive {
background: #212a2f;
border-radius: 0 100px 100px 0;
margin-right: 4%;
}
.menuSub .q-item {
border-radius: 0 100px 100px 0;
margin-right: 4%;
}
/* .menuSubAct {
background: #1e2529d9;
} */
.menuSubHover {
padding-left: 30%;
border-radius: 20px;
}
.q-expansion-item__content {
background: #212a2f;
padding: 5px 0px;
}
.tabNative { .tabNative {
color: grey; color: grey;
padding-left: 8%; padding-left: 8%;
@ -321,12 +118,15 @@ const doLogout = () => {
} }
.q-card { .q-card {
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important; box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
} }
.q-card--bordered { .q-card--bordered {
border: 1px solid #ededed; border: 1px solid #92b4c847;
box-shadow: none !important; box-shadow: none !important;
} }
.q-stepper{
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
}
.q-menu { .q-menu {
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important; box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
} }
@ -340,10 +140,9 @@ const doLogout = () => {
border-radius: 5px; border-radius: 5px;
} }
.q-field--outlined .q-field__control:before { .q-field--outlined .q-field__control:before,.q-field .q-field__control:before{
border-color: #c8d3db; border-color: #c8d3db;
} }
.q-field--outlined .q-icon { .q-field--outlined .q-icon {
color: #7474747f; color: #7474747f;
} }
@ -367,4 +166,19 @@ const doLogout = () => {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf; background-color: #a8bbbf;
} }
.header{
border-bottom: 1px solid #92b4c847;
height: 50px;
}
.textline1{
font-size: 0.90rem;
line-height:1.2rem !important;
font-weight: 500;
}
.textline2{
line-height:1rem !important;
font-weight: 400;
color: #96a9ad;
}
</style> </style>