ปรับ css ทะเบียนประวัติใหม่แท็บที่เหลือ

This commit is contained in:
Tanyalak 2024-04-24 17:26:12 +07:00
parent 15d174a98c
commit 0fa8d6ace1
15 changed files with 2153 additions and 2366 deletions

View file

@ -396,8 +396,8 @@ onMounted(() => {
});
</script>
<template>
<q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
<div class="row items-center q-gutter-x-sm q-pb-sm">
<q-btn flat color="primary" round dense icon="add" @click="onClickOpenDialog()">
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
<q-space />
@ -433,7 +433,7 @@ onMounted(() => {
options-cover
style="min-width: 150px"
/>
</q-toolbar>
</div>
<d-table
ref="table"
row-key="id"
@ -524,345 +524,329 @@ onMounted(() => {
</d-table>
<q-dialog v-model="modalDialogSalary" persistent>
<q-layout
view="lHh lpr lFf"
container
style="height: 90vh; min-width: 80%"
class="bg-white"
>
<q-card>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-header>
<q-toolbar>
<DialogHeader
:tittle="
isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
"
:close="onClickCloseDialog"
/>
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<DialogHeader
:tittle="
isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
"
:close="onClickCloseDialog"
/>
<q-separator color="grey-4" />
<q-page-container>
<q-page class="q-pa-md">
<div class="row col-12 q-col-gutter-sm">
<q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
v-model="formDataSalary.date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
borderless
:model-value="date2Thai(formDataSalary.date)"
:rules="[
(val: string) =>
!!val ||
`${'กรุณาเลือก วัน/เดือน/ปี'}`,
]"
:label="`${'วัน/เดือน/ปี'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
color="primary"
class="cursor-pointer"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-card-section style="max-height: 55vh" class="scroll">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
v-model="formDataSalary.date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
borderless
:model-value="date2Thai(formDataSalary.date)"
:rules="[
(val: string) =>
!!val ||
`${'กรุณาเลือก วัน/เดือน/ปี'}`,
]"
:label="`${'วัน/เดือน/ปี'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
color="primary"
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
:label="`${'เลขที่ตำแหน่ง'}`"
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
>
</q-input>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
ref="templatePosRef"
outlined
dense
lazy-rules
borderless
clearable
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'
)"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="positionRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.position"
:label="`${'ตำแหน่ง'}`"
type="textarea"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
outlined
dense
lazy-rules
v-model="formDataSalary.positionLine"
hide-bottom-space
:label="`${'สายงาน'}`"
/>
<!-- <q-select
<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
:label="`${'เลขที่ตำแหน่ง'}`"
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
>
</q-input>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
ref="templatePosRef"
outlined
dense
lazy-rules
borderless
clearable
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'
)"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="positionRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.position"
:label="`${'ตำแหน่ง'}`"
type="textarea"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
outlined
dense
lazy-rules
v-model="formDataSalary.positionLine"
hide-bottom-space
:label="`${'สายงาน'}`"
/>
<!-- <q-select
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionLine"
:label="`${'สายงาน'}`"
emit-value
map-options
option-label="name"
:options="positionLineOptions"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
)"
/> -->
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
outlined
dense
lazy-rules
v-model="formDataSalary.positionPathSide"
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.positionExecutive"
hide-bottom-space
:label="`${'ตำแหน่งทางการบริหาร'}`"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select
ref="positionType Ref"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionType"
:label="`${'ตำแหน่งประเภท'}`"
emit-value
map-options
option-label="name"
:options="positionLineOptions"
option-value="id"
:options="posTypeOptions"
option-value="name"
hide-bottom-space
use-input
input-debounce="0"
@update:model-value="updateSelectType"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select
ref="positionLevel Ref"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionLevel"
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
:label="`${'ระดับตำแหน่ง'}`"
emit-value
map-options
option-label="name"
:options="posLevelOption"
option-value="name"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
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-4">
<q-input
outlined
dense
lazy-rules
v-model="formDataSalary.positionPathSide"
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.positionExecutive"
hide-bottom-space
:label="`${'ตำแหน่งทางการบริหาร'}`"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
ref="amountRef"
dense
outlined
v-model="formDataSalary.salaryPos"
:rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]"
label="เงินประจำตำแหน่ง"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
ref="amountRef"
dense
outlined
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-4">
<q-select
ref="positionType Ref"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionType"
:label="`${'ตำแหน่งประเภท'}`"
emit-value
map-options
option-label="name"
:options="posTypeOptions"
option-value="name"
hide-bottom-space
use-input
input-debounce="0"
@update:model-value="updateSelectType"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
<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
clearable
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'
)"
/>
</div>
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select
ref="positionLevel Ref"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.positionLevel"
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
:label="`${'ระดับตำแหน่ง'}`"
emit-value
map-options
option-label="name"
:options="posLevelOption"
option-value="name"
hide-bottom-space
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
)"
/>
</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-4">
<q-input
ref="amountRef"
dense
outlined
v-model="formDataSalary.salaryPos"
:rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]"
label="เงินประจำตำแหน่ง"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<q-input
ref="amountRef"
dense
outlined
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
clearable
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'
)"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="docRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.doc"
:label="`${'เอกสารอ้างอิง'}`"
type="textarea"
hide-bottom-space
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
/>
</div>
</q-card>
</div>
</q-page>
</q-page-container>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="docRef"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.doc"
:label="`${'เอกสารอ้างอิง'}`"
type="textarea"
hide-bottom-space
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-footer>
<q-separator color="grey-4" />
<q-toolbar class="fit row wrap justify-end items-start content-start">
<q-btn
dense
unelevated
label="บันทึก"
id="onSubmit"
type="submit"
color="public"
class="q-px-md"
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</q-toolbar>
</q-footer>
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
id="onSubmit"
type="submit"
color="public"
class="q-px-md"
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-layout>
</q-card>
</q-dialog>
<DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />