ทะเบียนประวัติ: เครื่องราชฯ (card)
This commit is contained in:
puriphatt
parent
ab307e16a3
commit
7ad86b8f43
1 changed files with 100 additions and 15 deletions
|
|
@ -534,7 +534,6 @@ const clickClose = async () => {
|
|||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
myForm.value.reset()
|
||||
// modal.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
|
|
@ -659,9 +658,9 @@ onMounted(async () => {
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="filterSearch"
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -670,19 +669,19 @@ onMounted(async () => {
|
|||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
v-model="visibleColumns"
|
||||
dense
|
||||
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"
|
||||
options-dense
|
||||
class="q-mr-sm"
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
|
|
@ -727,6 +726,7 @@ onMounted(async () => {
|
|||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:rows-per-page-options="[0]"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
|
|
@ -742,13 +742,13 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
class="cursor-pointer"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
|
|
@ -769,23 +769,108 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
/>
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click.stop.prevent="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col) => col.name !== 'desc'
|
||||
)"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="text-grey-6" v-if="index <= 7">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark" v-if="index <= 7">
|
||||
<q-item-label
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-grey-6" v-if="index > 7">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark" v-if="index > 7">
|
||||
<q-item-label
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
|
|
@ -1105,7 +1190,7 @@ onMounted(async () => {
|
|||
unelevated
|
||||
label="บันทึก"
|
||||
id="onSubmit"
|
||||
type="reset"
|
||||
type="submit"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue