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

updated layout registry

Browse source
This commit is contained in:
Warunee Tamkoo 2024-03-12 15:51:47 +07:00
parent 08f0507abe
commit 4164b560eb
10 changed files with 320 additions and 310 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/modules/04_registryNew/components/detail/Achievement/Main.vue
View file

@ -11,17 +11,16 @@ import ResultsPerformance from "@/modules/04_registryNew/components/detail/Achie
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>
<template> <template>
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-md">
<div class="text-dark row items-center" style="font-size: 22px"> <div class="text-dark row items-center text-weight-bold">
<q-icon name="mdi-medal" class="q-mr-md" /> <q-icon name="mdi-medal" class="q-mr-md" size="sm" />
<span>ข้อมูลผลงานและเครื่องราชฯ</span> <h3 class="resigtry-tab-title">ข้อมูลผลงานและเครื่องราชฯ</h3>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense
class="text-grey" class="text-grey"
active-color="blue" active-color="blue"
indicator-color="white" indicator-color="white"

9
src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
View file

@ -10,17 +10,16 @@ import PerformSpecialWork from "@/modules/04_registryNew/components/detail/Gover
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>
<template> <template>
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-md">
<div class="text-dark row items-center text-weight-bold" style="font-size: 20px"> <div class="text-dark row items-center text-weight-bold">
<q-icon name="mdi-account-tie" class="q-mr-md" /> <q-icon name="mdi-account-tie" class="q-mr-md" size="sm" />
<span>ข้อมูลราชการ</span> <h3 class="resigtry-tab-title">ข้อมูลราชการ</h3>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense
class="text-grey" class="text-grey"
active-color="blue" active-color="blue"
indicator-color="white" indicator-color="white"

9
src/modules/04_registryNew/components/detail/Other/Main.vue
View file

@ -8,17 +8,16 @@ import Documentipline from "@/modules/04_registryNew/components/detail/Other/02_
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>
<template> <template>
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-md">
<div class="text-dark row items-center text-weight-bold" style="font-size: 20px"> <div class="text-dark row items-center text-weight-bold">
<q-icon name="mdi-bookmark" class="q-mr-md" /> <q-icon name="mdi-bookmark" class="q-mr-md" size="sm" />
<span>เอกสารหลักฐานและอื่นๆ</span> <h3 class="resigtry-tab-title">เอกสารหลักฐานและอื่นๆ</h3>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense
class="text-grey" class="text-grey"
active-color="blue" active-color="blue"
indicator-color="white" indicator-color="white"

14
src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
View file

@ -12,20 +12,16 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>
<template> <template>
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-md">
<div <div class="text-dark row items-center text-weight-bold">
class="text-dark row items-center text-weight-bold" <q-icon name="mdi-account" class="q-mr-md" size="sm" />
style="font-size: 20px" <h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
>
<q-icon name="mdi-account" class="q-mr-md" />
<span>ข้อมูลส่วนตัว</span>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense
class="text-grey" class="text-grey"
active-color="blue" active-color="blue"
indicator-color="white" indicator-color="white"
@ -33,7 +29,7 @@ const tab = ref<string>("1");
narrow-indicator narrow-indicator
bordered bordered
> >
<q-tab name="1" label="ข้อมูลส่วนตัว" /> <q-tab name="1" label="ประวัติส่วนตัว" />
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" /> <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
<q-tab name="3" label="ข้อมูลที่อยู่" /> <q-tab name="3" label="ข้อมูลที่อยู่" />
<q-tab name="4" label="ข้อมูลครอบครัว" /> <q-tab name="4" label="ข้อมูลครอบครัว" />

513
src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
View file

@ -327,11 +327,11 @@ function ocClikcHistory() {
} }
</script> </script>
<template> <template>
<div class="row items-center q-gutter-sm"> <!-- <div class="row items-center q-gutter-sm">
<div class="toptitle text-dark row items-center q-py-xs"> <div class="toptitle text-dark row items-center q-py-xs">
ตำแหน่งเงินเดือน ตำแหน่งเงินเดือน
</div> </div>
</div> </div> -->
<q-toolbar style="padding: 0px" class="text-primary"> <q-toolbar style="padding: 0px" class="text-primary">
<q-btn flat round dense icon="add" @click="onClickOpenDialog()"> <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
@ -475,290 +475,285 @@ function ocClikcHistory() {
:close="onClickCloseDialog" :close="onClickCloseDialog"
/> />
<q-separator /> <q-separator />
<q-card-section class="q-pa-sm bg-grey-1"> <q-card-section class="q-pa-md bg-grey-1">
<div class="row col-12 q-col-gutter-sm"> <div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-12"> <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
<q-card flat bordered class="fit q-pa-sm"> <div class="col-xs-6 col-sm-6 col-md-6">
<div class="row col-12 q-col-gutter-xs"> <datepicker
<div class="col-xs-6 col-sm-6 col-md-6"> v-model="formDataSalary.date"
<datepicker :locale="'th'"
v-model="formDataSalary.date" autoApply
:locale="'th'" :enableTimePicker="false"
autoApply week-start="0"
:enableTimePicker="false" >
week-start="0" <template #year="{ year }">{{ year + 543 }}</template>
> <template #year-overlay-value="{ value }">{{
<template #year="{ year }">{{ year + 543 }}</template> parseInt(value + 543)
<template #year-overlay-value="{ value }">{{ }}</template>
parseInt(value + 543) <template #trigger>
}}</template> <q-input
<template #trigger> ref="dateRef"
<q-input outlined
ref="dateRef" dense
outlined borderless
dense :model-value="date2Thai(formDataSalary.date)"
borderless :rules="[
:model-value="date2Thai(formDataSalary.date)"
:rules="[
(val: string) => (val: string) =>
!!val || !!val ||
`${'กรุณาเลือก วัน/เดือน/ปี'}`, `${'กรุณาเลือก วัน/เดือน/ปี'}`,
]" ]"
:label="`${'วัน/เดือน/ปี'}`" :label="`${'วัน/เดือน/ปี'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
ref="posNoRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.posNo"
hide-bottom-space hide-bottom-space
:label="`${'เลขที่ตำแหน่ง'}`"
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
> >
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"> </q-icon>
</template>
</q-input> </q-input>
</div> </template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 q-mt-lg"> <div class="col-xs-6 col-sm-6 col-md-6">
<q-select <q-input
ref="templatePosRef" ref="posNoRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.templatePos" v-model="formDataSalary.posNo"
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`" hide-bottom-space
option-label="name" :label="`${'เลขที่ตำแหน่ง'}`"
:options="posNoOptions" :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
option-value="name" >
hide-bottom-space </q-input>
emit-value </div>
use-input
input-debounce="0" <div class="col-xs-12 col-sm-12 col-md-12">
@update:modelValue="updatePos" <q-select
@filter="(inputValue: any, ref="templatePosRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.templatePos"
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
option-label="name"
:options="posNoOptions"
option-value="name"
hide-bottom-space
emit-value
use-input
input-debounce="0"
@update:modelValue="updatePos"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos' doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
)" )"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
ref="positionRef" ref="positionRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.position" v-model="formDataSalary.position"
:label="`${'ตำแหน่ง'}`" :label="`${'ตำแหน่ง'}`"
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-select <q-select
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.positionLineName" v-model="formDataSalary.positionLineName"
:label="`${'สายงาน'}`" :label="`${'สายงาน'}`"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="positionLineOptions" :options="positionLineOptions"
option-value="id" option-value="id"
hide-bottom-space hide-bottom-space
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName' doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
)" )"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-select <q-input
ref="typePositionRef" outlined
outlined dense
dense lazy-rules
lazy-rules v-model="formDataSalary.positionPathSideName"
borderless hide-bottom-space
v-model="formDataSalary.typePosition" :label="`${'ด้าน/สาขา'}`"
:label="`${'ตำแหน่งประเภท'}`" />
emit-value </div>
map-options <div class="col-xs-6 col-sm-6 col-md-4">
option-label="name" <q-input
:options="posTypeOptions" outlined
option-value="id" dense
hide-bottom-space lazy-rules
use-input borderless
input-debounce="0" v-model="formDataSalary.positionExecutiveName"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]" hide-bottom-space
@filter="(inputValue: any, :label="`${'ตำแหน่งทางการบริหาร'}`"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select
ref="typePositionRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.typePosition"
:label="`${'ตำแหน่งประเภท'}`"
emit-value
map-options
option-label="name"
:options="posTypeOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType' doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
)" )"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-3"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-select <q-select
ref="levelPositionRef" ref="levelPositionRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.levelPosition" v-model="formDataSalary.levelPosition"
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
:label="`${'ระดับ'}`" :label="`${'ระดับตำแหน่ง'}`"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="posLevelOption" :options="posLevelOption"
option-value="name" option-value="name"
hide-bottom-space hide-bottom-space
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel' doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
)" )"
/> />
</div> </div>
<div class="col-md-4"></div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
ref="salaryRef"
dense
outlined
v-model="formDataSalary.salary"
label="เงินเดือน"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-3"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
outlined ref="amountRef"
dense dense
lazy-rules outlined
v-model="formDataSalary.positionPathSideName" v-model="formDataSalary.salaryPos"
hide-bottom-space label="เงินประจำตำแหน่ง"
:label="`${'ด้าน/สาขา'}`" mask="###,###,###,###"
/> reverse-fill-mask
</div> lazy-rules
<div class="col-xs-6 col-sm-6 col-md-6"> hide-bottom-space
<q-input />
outlined </div>
dense <div class="col-xs-6 col-sm-6 col-md-4">
lazy-rules <q-input
borderless ref="amountRef"
v-model="formDataSalary.positionExecutiveName" dense
hide-bottom-space outlined
:label="`${'ตำแหน่งทางการบริหาร'}`" v-model="formDataSalary.salaryCompensation"
> label="เงินค่าตอบแทนรายเดือน"
</q-input> mask="###,###,###,###"
</div> reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-12">
<q-input <q-input
ref="salaryRef" outlined
dense dense
outlined lazy-rules
v-model="formDataSalary.salary" borderless
label="เงินเดือน" v-model="formDataSalary.refCommandNo"
mask="###,###,###,###" hide-bottom-space
reverse-fill-mask :label="`${'เลขที่คำสั่ง'}`"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" mask="#####################"
lazy-rules >
hide-bottom-space <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
/> </q-input>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-select
ref="amountRef" ref="templateDocRef"
dense outlined
outlined dense
v-model="formDataSalary.salaryPos" lazy-rules
label="เงินประจำตำแหน่ง" borderless
mask="###,###,###,###" v-model="formDataSalary.templateDoc"
reverse-fill-mask :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
lazy-rules option-label="name"
hide-bottom-space :options="docOption"
/> option-value="name"
</div> emit-value
<div class="col-xs-6 col-sm-6 col-md-4"> hide-bottom-space
<q-input use-input
ref="amountRef" input-debounce="0"
dense @update:modelValue="updateDoc"
outlined @filter="(inputValue: any,
v-model="formDataSalary.salaryCompensation"
label="เงินค่าตอบแทนรายเดือน"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<q-input
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
mask="#####################"
>
<!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
</q-input>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
ref="templateDocRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.templateDoc"
:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
option-label="name"
:options="docOption"
option-value="name"
emit-value
hide-bottom-space
use-input
input-debounce="0"
@update:modelValue="updateDoc"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'doc' doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
)" )"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
ref="docRef" ref="docRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.doc" v-model="formDataSalary.doc"
:label="`${'เอกสารอ้างอิง'}`" :label="`${'เอกสารอ้างอิง'}`"
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]" :rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
/> />
</div> </div>
</div> </q-card>
</q-card>
</div>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />

10
src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
View file

@ -183,11 +183,11 @@ function ocClikcHistory() {
} }
</script> </script>
<template> <template>
<div class="row items-center q-gutter-sm"> <!-- <div class="row items-center q-gutter-sm">
<div class="toptitle text-dark row items-center q-py-xs"> <div class="toptitle text-dark row items-center q-py-xs">
บันทึกวันที่ไม่ได้รับเงินเดือนฯ บันทึกวันที่ไม่ได้รับเงินเดือนฯ
</div> </div>
</div> </div> -->
<q-toolbar style="padding: 0px" class="text-primary"> <q-toolbar style="padding: 0px" class="text-primary">
<q-btn flat round dense icon="add" @click="onClickOpenDialog()"> <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
<q-tooltip>เพิ่ม</q-tooltip> <q-tooltip>เพิ่ม</q-tooltip>
@ -225,7 +225,7 @@ function ocClikcHistory() {
<q-btn-toggle <q-btn-toggle
v-model="modelView" v-model="modelView"
toggle-color="grey-4" toggle-color="grey-4"
class="no-shadow" class="no-shadow toggle-borderd"
:options="[ :options="[
{ value: 'table', slot: 'table' }, { value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' }, { value: 'card', slot: 'card' },
@ -234,7 +234,7 @@ function ocClikcHistory() {
<template v-slot:table> <template v-slot:table>
<q-icon <q-icon
name="format_list_bulleted" name="format_list_bulleted"
size="24px" size="sm"
:style="{ :style="{
color: modelView === 'table' ? '#787B7C' : '#C9D3DB', color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
}" }"
@ -243,7 +243,7 @@ function ocClikcHistory() {
<template v-slot:card> <template v-slot:card>
<q-icon <q-icon
name="mdi-view-grid-outline" name="mdi-view-grid-outline"
size="24px" size="sm"
:style="{ :style="{
color: modelView === 'card' ? '#787B7C' : '#C9D3DB', color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
}" }"

12
src/modules/04_registryNew/components/detail/Salary/Main.vue
View file

@ -8,20 +8,16 @@ import NotReceiveSalary from "@/modules/04_registryNew/components/detail/Salary/
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>
<template> <template>
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-md">
<div <div class="text-dark row items-center text-weight-bold">
class="text-dark row items-center text-weight-bold" <q-icon name="mdi-cash" class="q-mr-md" size="sm" />
style="font-size: 20px" <h3 class="resigtry-tab-title">ข้อมูลเงินเดือน/ค่าจ้าง</h3>
>
<q-icon name="mdi-cash" class="q-mr-md" />
<span>ข้อมูลเงินเดือน/ค่าจ้าง</span>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense
class="text-grey" class="text-grey"
active-color="blue" active-color="blue"
indicator-color="white" indicator-color="white"

3
src/modules/04_registryNew/components/detail/TabMain.vue
View file

@ -41,6 +41,7 @@ const itemsTab = ref<any>([
const splitterModel = ref<number>(12); const splitterModel = ref<number>(12);
</script> </script>
<template> <template>
<q-splitter v-model="splitterModel" disable> <q-splitter v-model="splitterModel" disable>
<template v-slot:before> <template v-slot:before>
@ -64,7 +65,7 @@ const splitterModel = ref<number>(12);
vertical vertical
transition-prev="jump-up" transition-prev="jump-up"
transition-next="jump-up" transition-next="jump-up"
class="q-pa-md" class="q-px-md"
> >
<q-tab-panel <q-tab-panel
v-for="(tab, index) in itemsTab" v-for="(tab, index) in itemsTab"

41
src/modules/04_registryNew/views/detailView.vue
View file

@ -67,7 +67,7 @@ onMounted(() => {
}); });
</script> </script>
<template> <template>
<div class="row items-center q-gutter-sm"> <div class="row items-center q-gutter-sm q-mb-xs">
<div class="toptitle text-dark row items-center q-py-xs"> <div class="toptitle text-dark row items-center q-py-xs">
<q-btn <q-btn
icon="mdi-arrow-left" icon="mdi-arrow-left"
@ -83,7 +83,7 @@ onMounted(() => {
</div> </div>
<q-space /> <q-space />
<q-btn-dropdown <q-btn-dropdown
size="16px" size="md"
rounded rounded
unelevated unelevated
color="grey-4" color="grey-4"
@ -104,6 +104,7 @@ onMounted(() => {
color="grey-4" color="grey-4"
text-color="primary" text-color="primary"
icon="mdi-file-eye-outline" icon="mdi-file-eye-outline"
size="md"
> >
<q-tooltip>ดาวน์ไฟล์</q-tooltip> <q-tooltip>ดาวน์ไฟล์</q-tooltip>
<q-menu> <q-menu>
@ -120,17 +121,19 @@ onMounted(() => {
</div> </div>
<q-card> <q-card>
<div class="column" style="height: 170px"> <div class="column" style="height: 160px">
<div class="col row items-center"> <div class="col row items-center">
<div class="row col-12"> <div class="row col-12">
<div class="col-sm-3 col-md-2"></div> <div class="col-sm-3 col-md-2"></div>
<div class="col"> <div class="col">
<div class="col-12 text-primary" style="font-size: 20px"> <div class="col-12 text-primary">
{{ <h2 class="title q-ma-none q-pa-none">
`${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}` {{
}} `${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}`
}}
</h2>
</div> </div>
<div class="col-12">{{ formDetail?.position }}</div> <div class="col-12 subtitle">{{ formDetail?.position }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -153,20 +156,20 @@ onMounted(() => {
<div class="col-sm-3 col-md-2"></div> <div class="col-sm-3 col-md-2"></div>
<div class="col-2"> <div class="col-2">
<div class="col-sm-3 col-md-3"> <div class="col-sm-3 col-md-3">
<div class="col text-grey-5">ตำแหน่งในสายงาน</div> <div class="col text-grey-6">ตำแหน่งในสายงาน</div>
<div class="col">หัวหน้าสำนักงาน</div> <div class="col">หัวหน้าสำนักงาน</div>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-2">
<div class="col-sm-3 col-md-3"> <div class="col-sm-3 col-md-3">
<div class="col text-grey-5">ประเภทตำแหน่ง</div> <div class="col text-grey-6">ประเภทตำแหน่ง</div>
<div class="col">บริหาร</div> <div class="col">บริหาร</div>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-2">
<div class="col-sm-3 col-md-3"> <div class="col-sm-3 col-md-3">
<div class="col text-grey-5">ระดับตำแหน่งง</div> <div class="col text-grey-6">ระดับตำแหน่งง</div>
<div class="col">สำนาญการพิเศษ</div> <div class="col">ชำนาญการพิเศษ</div>
</div> </div>
</div> </div>
</div> </div>
@ -174,15 +177,27 @@ onMounted(() => {
</div> </div>
</q-card> </q-card>
<q-card class="q-mt-md"> <q-card class="q-mt-md rounded">
<TabMain /> <TabMain />
</q-card> </q-card>
</template> </template>
<style scoped> <style scoped>
h2.title {
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: 500;
}
.subtitle {
font-size: 1rem;
color: #34373c;
}
.absolute-center-left { .absolute-center-left {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.rounded {
border-radius: 10px;
}
</style> </style>

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

@ -145,3 +145,13 @@ $muti-tab: #87d4cc
.input-alert i.text-primary .input-alert i.text-primary
color: #f00 !important color: #f00 !important
/* registry common style */
.toggle-borderd
border: 1px solid #ecebeb
h3.resigtry-tab-title
font-size: 1.2rem
font-weight: 600
margin: 0 0
padding: 0 0