ปรับ ui เครื่องราช > บันทึกผลการเสนอขอ
This commit is contained in:
Tanyalak
parent
1e7f5b8187
commit
430f6a1074
3 changed files with 180 additions and 190 deletions
|
|
@ -152,7 +152,7 @@ const pagination = ref({
|
|||
<Transition>
|
||||
<div class="rounded-borders q-pa-md q-mb-md">
|
||||
<div class="row col-12">
|
||||
<q-card bordered class="col-12 q-pa-md q-mb-sm">
|
||||
<q-card bordered class="col-12 q-pa-sm q-mb-sm">
|
||||
<q-form ref="myForm">
|
||||
<div class="row col-12 q-col-gutter-x-sm">
|
||||
<div class="col-3">
|
||||
|
|
@ -167,20 +167,12 @@ const pagination = ref({
|
|||
<q-input class="bg-white" outlined dense lazy-rules v-model="documentTitle" :label="`${'ชื่อเอกสาร'}`"
|
||||
hide-bottom-space :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input class="bg-white" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
|
||||
<div class="col-6 row no-wrap">
|
||||
<q-input class="bg-white full-width" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
|
||||
hide-bottom-space />
|
||||
<q-btn unelevated dense class="q-ml-sm q-px-md items-center" color="public" label="บันทึก" @click="save" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<q-separator/>
|
||||
</div>
|
||||
<div class="row col-12 q-mt-xs">
|
||||
<q-space />
|
||||
<q-btn unelevated dense class="q-px-md items-center" color="public" label="บันทึก" @click="save" />
|
||||
</div>
|
||||
|
||||
</q-form>
|
||||
</q-card>
|
||||
<div class="row col-12">
|
||||
|
|
|
|||
|
|
@ -537,7 +537,6 @@ const clearInsigniaFilters = (name: string) => {
|
|||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
|
|
|
|||
|
|
@ -544,71 +544,72 @@ const clearInsigniaFilters = (name: string) => {
|
|||
class="q-pa-none"
|
||||
>
|
||||
<div class="q-pa-md">
|
||||
<div class="row col-12 q-pb-sm q-col-gutter-x-xs no-wrap">
|
||||
<div>
|
||||
<q-file
|
||||
dense
|
||||
clearable
|
||||
outlined
|
||||
v-model="fileResult"
|
||||
label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
style="min-width: 350px"
|
||||
accept=".xlsx"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
<q-tooltip
|
||||
>อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
|
||||
<q-card bordered class="col-12 q-mb-sm q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs">
|
||||
<div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
|
||||
<q-file
|
||||
dense
|
||||
clearable
|
||||
outlined
|
||||
v-model="fileResult"
|
||||
label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
|
||||
accept=".xlsx"
|
||||
class=" full-width"
|
||||
>
|
||||
</q-file>
|
||||
</div>
|
||||
<div v-if="fileResult !== null">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-upload"
|
||||
@click="perviewfile(fileResult, 'receice')"
|
||||
>
|
||||
<q-tooltip
|
||||
>อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
<q-tooltip
|
||||
>อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
|
||||
>
|
||||
</q-file>
|
||||
<div v-if="fileResult !== null">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
class="bg-teal-1 fit"
|
||||
color="add"
|
||||
icon="mdi-upload"
|
||||
@click="perviewfile(fileResult, 'receice')"
|
||||
>
|
||||
<q-tooltip
|
||||
>อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
|
||||
<q-file
|
||||
dense
|
||||
clearable
|
||||
outlined
|
||||
v-model="fileinvoice"
|
||||
label="บันทึกผลการจ่ายใบกำกับ"
|
||||
accept=".xlsx"
|
||||
class=" full-width"
|
||||
>
|
||||
</q-btn>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary"/>
|
||||
</template>
|
||||
<q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
|
||||
</q-file>
|
||||
<div v-if="fileinvoice !== null">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
color="add"
|
||||
class="bg-teal-1 fit"
|
||||
icon="mdi-upload"
|
||||
@click="perviewfile(fileinvoice, 'invoice')"
|
||||
>
|
||||
<q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<q-file
|
||||
dense
|
||||
clearable
|
||||
outlined
|
||||
v-model="fileinvoice"
|
||||
label="บันทึกผลการจ่ายใบกำกับ"
|
||||
style="min-width: 350px"
|
||||
accept=".xlsx"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
<q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
|
||||
</q-file>
|
||||
</div>
|
||||
<div v-if="fileinvoice !== null">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-upload"
|
||||
@click="perviewfile(fileinvoice, 'invoice')"
|
||||
>
|
||||
<q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
|
||||
</q-card>
|
||||
<div class="row col-12 q-pb-sm q-col-gutter-xs">
|
||||
<q-select
|
||||
class="col-2"
|
||||
v-model="DataStore.insignia"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -623,7 +624,7 @@ const clearInsigniaFilters = (name: string) => {
|
|||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
style="width: 280px"
|
||||
@update:model-value="selectorInsignia"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaTypeFilter'
|
||||
|
|
@ -645,122 +646,8 @@ const clearInsigniaFilters = (name: string) => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-model="DataStore.invoiceType"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'ใบกำกับ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
option-label="name"
|
||||
:options="filterInvoice"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
|
||||
) "
|
||||
>
|
||||
<template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
clearInsigniaFilters('filterInvoice'),
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div>
|
||||
<q-select
|
||||
v-model="DataStore.employeeClass"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'สถานภาพ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
option-label="name"
|
||||
:options="filterEmployee"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
|
||||
) "
|
||||
>
|
||||
<template
|
||||
v-if="DataStore.employeeClass !== 'all'"
|
||||
v-slot:append
|
||||
>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
clearInsigniaFilters('filterEmployee'),
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-btn
|
||||
@click="addData()"
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</q-select>
|
||||
<q-space />
|
||||
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
|
|
@ -800,6 +687,118 @@ const clearInsigniaFilters = (name: string) => {
|
|||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row col-12 q-mb-sm q-col-gutter-xs">
|
||||
<q-select
|
||||
v-model="DataStore.invoiceType"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'ใบกำกับ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
option-label="name"
|
||||
:options="filterInvoice"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="width: 250px"
|
||||
@update:model-value="
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
|
||||
) "
|
||||
>
|
||||
<template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
clearInsigniaFilters('filterInvoice'),
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-model="DataStore.employeeClass"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'สถานภาพ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
option-label="name"
|
||||
:options="filterEmployee"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="width: 280px"
|
||||
@update:model-value="
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
|
||||
) "
|
||||
>
|
||||
<template
|
||||
v-if="DataStore.employeeClass !== 'all'"
|
||||
v-slot:append
|
||||
>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
clearInsigniaFilters('filterEmployee'),
|
||||
DataStore.searchData(
|
||||
DataStore.invoiceType,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div>
|
||||
<q-btn
|
||||
@click="addData()"
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="DataStore.rows"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue