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="ข้อมูลครอบครัว" />

75
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,11 +475,9 @@ 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="row col-12 q-col-gutter-xs">
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-6">
<datepicker <datepicker
v-model="formDataSalary.date" v-model="formDataSalary.date"
@ -508,8 +506,7 @@ function ocClikcHistory() {
hide-bottom-space hide-bottom-space
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer"> </q-icon>
</q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -531,7 +528,7 @@ function ocClikcHistory() {
</q-input> </q-input>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12 q-mt-lg"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-select <q-select
ref="templatePosRef" ref="templatePosRef"
outlined outlined
@ -569,7 +566,7 @@ function ocClikcHistory() {
/> />
</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
@ -591,7 +588,30 @@ function ocClikcHistory() {
/> />
</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-input
outlined
dense
lazy-rules
v-model="formDataSalary.positionPathSideName"
hide-bottom-space
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionExecutiveName"
hide-bottom-space
:label="`${'ตำแหน่งทางการบริหาร'}`"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select <q-select
ref="typePositionRef" ref="typePositionRef"
outlined outlined
@ -615,7 +635,7 @@ function ocClikcHistory() {
/> />
</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
@ -623,8 +643,8 @@ function ocClikcHistory() {
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"
@ -638,30 +658,7 @@ function ocClikcHistory() {
)" )"
/> />
</div> </div>
<div class="col-md-4"></div>
<div class="col-xs-6 col-sm-6 col-md-3">
<q-input
outlined
dense
lazy-rules
v-model="formDataSalary.positionPathSideName"
hide-bottom-space
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionExecutiveName"
hide-bottom-space
:label="`${'ตำแหน่งทางการบริหาร'}`"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
ref="salaryRef" ref="salaryRef"
@ -756,10 +753,8 @@ function ocClikcHistory() {
: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 />
<q-card-section align="right"> <q-card-section align="right">

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"

35
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