ปรับรูปแบบฟอร์ม ปุ่ม ในระบบบริการเจ้าของข้อมูล

This commit is contained in:
STW_TTTY\stwtt 2024-06-11 16:02:21 +07:00
parent 3800ce5547
commit f08e636d82
16 changed files with 171 additions and 158 deletions

View file

@ -423,10 +423,8 @@ function onSubmit(data: any) {
</q-card>
</div>
</div>
<div v-if="!isReadOnly">
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-separator v-if="!isReadOnly"/>
<q-card-actions align="right" class="bg-white text-teal" v-if="!isReadOnly">
<q-btn
id="onSubmit"
type="submit"
@ -434,8 +432,8 @@ function onSubmit(data: any) {
color="secondary"
><q-tooltip>นท</q-tooltip></q-btn
>
</div>
</div>
</q-card-actions>
</q-card>
</form>
</div>

View file

@ -264,21 +264,18 @@ onMounted(async () => {
</div>
<div class="col-12">
<q-card bordered class="q-pa-md">
<div class="row q-mb-sm">
<div>
<q-btn
id="addComplaints"
for="addComplaints"
size="12px"
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมการอทธรณ/องทกข</q-tooltip></q-btn
>
</div>
</div>
<q-btn
id="addComplaints"
for="addComplaints"
size="12px"
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมการอทธรณ/องทกข</q-tooltip></q-btn
>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-md-2">
<datepicker
@ -378,88 +375,91 @@ onMounted(async () => {
options-cover
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<d-table
flat
bordered
dense
class="custom-table2"
style="max-height: 80vh"
:rows="dataStore.rows"
:columns="dataStore.columns"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="editPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="editPage(props.row.id)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
<div class="col-12">
<d-table
flat
bordered
dense
class="custom-table2"
style="max-height: 80vh"
:rows="dataStore.rows"
:columns="dataStore.columns"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="editPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<q-item-label v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</q-item-label>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="editPage(props.row.id)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
<q-item-label v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div>
</div>
</q-card>
</div>
</div>