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

fix layout

Browse source
This commit is contained in:
Warunee Tamkoo 2023-10-26 13:19:25 +07:00
parent 99c4459145
commit e8767540c5
1 changed files with 35 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

213
src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
View file

@ -311,71 +311,29 @@ const paginationHis = ref({
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<div class="flex items-center">
<div class="flex items-center">
<q-icon
name="mdi-clipboard"
size="1.5em"
color="grey-5"
class="q-mr-md"
/>
<q-icon name="mdi-clipboard" size="1.5em" color="grey-5" class="q-mr-md" />
<div class="text-bold text-subtitle2 col-12 row items-center">
ข้อมูลการจ้าง
</div>
</div>
<div class="q-gutter-sm q-mx-sm">
<q-btn
size="12px"
flat
round
color="primary"
@click="onClickAdd"
icon="mdi-plus"
>
<q-btn size="12px" flat round color="primary" @click="onClickAdd" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
</q-btn>
</div>
<q-space />
<div class="q-gutter-sm" style="display: flex">
<q-input
outlined
dense
v-model="filter"
label="ค้นหา"
style="min-width: 150px"
/>
<q-input outlined dense v-model="filter" label="ค้นหา" style="min-width: 150px" />
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
<q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px" />
</div>
</div>
<div class="q-mt-sm">
<d-table
flat
bordered
id="table"
ref="table"
:columns="columns"
:rows="rows"
:filter="filter"
row-key="dateEmployment"
:paging="true"
dense
:visible-columns="visibleColumns"
v-model:pagination="pagination"
>
<d-table flat bordered id="table" ref="table" :columns="columns" :rows="rows" :filter="filter"
row-key="dateEmployment" :paging="true" dense :visible-columns="visibleColumns" v-model:pagination="pagination">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -394,38 +352,16 @@ const paginationHis = ref({
</div>
</q-td>
<q-td>
<q-btn
dense
flat
round
color="primary"
icon="mdi-pencil"
@click="clickEdit(props.row, 'edit')"
>
<q-btn dense flat round color="primary" icon="mdi-pencil" @click="clickEdit(props.row, 'edit')">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn
dense
flat
round
color="red"
icon="mdi-delete"
@click="cilckDelete(props.row.id)"
>
<q-tooltip>ลบข้อมูล</q-tooltip></q-btn
>
<q-btn dense flat round color="red" icon="mdi-delete" @click="cilckDelete(props.row.id)">
<q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
</q-td>
<q-td>
<q-btn
dense
flat
round
color="info"
@click="openPopupHistory(props.row.id)"
icon="mdi-history"
>
<q-btn dense flat round color="info" @click="openPopupHistory(props.row.id)" icon="mdi-history">
<q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
</q-btn>
</q-td>
@ -444,32 +380,17 @@ const paginationHis = ref({
</span>
<span style="margin-right: 0" v-else> เพิ่มข้อมูลการจ้าง </span>
</q-toolbar-title>
<q-btn
for="closeDialog"
icon="close"
unelevated
round
dense
style="color: #eb0505; background-color: #ffdede"
@click="colsePopup"
/>
<q-btn for="closeDialog" icon="close" unelevated round dense style="color: #eb0505; background-color: #ffdede"
@click="colsePopup" />
</q-toolbar>
<q-separator />
<form @submit.prevent="validateForm">
<q-card-section class="q-pt-none">
<div class="col-12 row q-pa-md">
<div
class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs">
<div class="col-xs-12 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEmployment"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="formData.dateEmployment" :locale="'th'" autoApply
borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -477,27 +398,13 @@ const paginationHis = ref({
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="inputdateEmployment"
ref="dateEmploymentRef"
outlined
dense
class="full-width datepicker"
:model-value="
formData.dateEmployment != null
<q-input for="inputdateEmployment" ref="dateEmploymentRef" outlined dense
class="full-width datepicker" :model-value="formData.dateEmployment != null
? date2Thai(formData.dateEmployment)
: null
"
label="วันที่จ้าง"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
lazy-rules
>
" label="วันที่จ้าง" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]" lazy-rules>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -506,16 +413,9 @@ const paginationHis = ref({
</div>
<div class="col-xs-12 col-sm-6">
<q-input
for="inputOrderEmployment"
ref="orderEmploymentRef"
dense
outlined
v-model="formData.orderEmployment"
label="คำสั่งจ้าง"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
lazy-rules
/>
<q-input for="inputOrderEmployment" ref="orderEmploymentRef" dense outlined
v-model="formData.orderEmployment" label="คำสั่งจ้าง"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]" lazy-rules />
</div>
</div>
</div>
@ -525,16 +425,8 @@ const paginationHis = ref({
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
for="ButtonOnSubmit"
id="onSubmit"
flat
round
color="secondary"
icon="mdi-content-save-outline"
type="submit"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
<q-btn for="ButtonOnSubmit" id="onSubmit" flat round color="secondary" icon="mdi-content-save-outline"
type="submit"><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn>
</q-card-actions>
</form>
</q-card>
@ -546,15 +438,8 @@ const paginationHis = ref({
<q-toolbar-title class="text-subtitle1 text-weight-bold">
<span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
</q-toolbar-title>
<q-btn
for="closeDialog"
icon="close"
unelevated
round
dense
style="color: #eb0505; background-color: #ffdede"
@click="colsePopup"
/>
<q-btn for="closeDialog" icon="close" unelevated round dense style="color: #eb0505; background-color: #ffdede"
@click="colsePopup" />
</q-toolbar>
<q-separator />
@ -562,44 +447,16 @@ const paginationHis = ref({
<q-toolbar class="q-pa-none">
<q-space />
<div class="q-gutter-sm" style="display: flex">
<q-input
outlined
dense
v-model="filterHis"
label="ค้นหา"
style="min-width: 150px"
/>
<q-input outlined dense v-model="filterHis" label="ค้นหา" style="min-width: 150px" />
<q-select
v-model="visibleColumnsHis"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columnsHis"
option-value="name"
options-cover
style="min-width: 150px"
/>
<q-select v-model="visibleColumnsHis" multiple outlined dense options-dense
:display-value="$q.lang.table.columns" emit-value map-options :options="columnsHis" option-value="name"
options-cover style="min-width: 150px" />
</div>
</q-toolbar>
<d-table
flat
bordered
id="table"
ref="table"
:columns="columnsHis"
:rows="rowsHis"
:filter="filterHis"
row-key="dateEmployment"
:paging="true"
dense
:visible-columns="visibleColumnsHis"
v-model:pagination="paginationHis"
>
<d-table flat bordered id="table" ref="table" :columns="columnsHis" :rows="rowsHis" :filter="filterHis"
row-key="dateEmployment" :paging="true" dense :visible-columns="visibleColumnsHis"
v-model:pagination="paginationHis">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">