ทะเบียนประวัติ: ปรับแท็บอื่นๆ
This commit is contained in:
oat_dev
parent
07474e873d
commit
7d74a4e792
2 changed files with 185 additions and 177 deletions
|
|
@ -28,6 +28,10 @@ const {
|
||||||
|
|
||||||
const id = ref<string>("");
|
const id = ref<string>("");
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
const profileId = ref<string>(
|
const profileId = ref<string>(
|
||||||
route.params.id ? route.params.id.toString() : ""
|
route.params.id ? route.params.id.toString() : ""
|
||||||
);
|
);
|
||||||
|
|
@ -287,6 +291,7 @@ onMounted(() => {
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
dense
|
dense
|
||||||
bordered
|
bordered
|
||||||
|
v-model:pagination="pagination"
|
||||||
flat
|
flat
|
||||||
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
|
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
|
||||||
:grid="mode === 'card'"
|
:grid="mode === 'card'"
|
||||||
|
|
@ -384,98 +389,101 @@ onMounted(() => {
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:pagination="scope">
|
|
||||||
<q-pagination
|
|
||||||
v-model="currentPage"
|
|
||||||
active-color="primary"
|
|
||||||
color="dark"
|
|
||||||
:max="Number(maxPage)"
|
|
||||||
size="sm"
|
|
||||||
boundary-links
|
|
||||||
direction-links
|
|
||||||
></q-pagination>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
||||||
<!-- dialog add edit -->
|
<!-- dialog add edit -->
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card style="min-width: 600px">
|
<q-layout
|
||||||
|
view="lHh lpr lFf"
|
||||||
|
container
|
||||||
|
style="height: 80vh"
|
||||||
|
class="bg-white"
|
||||||
|
>
|
||||||
<q-form greedy @submit.prevent @validation-success="validateForm">
|
<q-form greedy @submit.prevent @validation-success="validateForm">
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
<q-header>
|
||||||
<DialogHeader tittle="อื่นๆ" :close="closeDialog" />
|
<q-toolbar>
|
||||||
</q-card-section>
|
<DialogHeader
|
||||||
|
:tittle="edit ? 'แก้ไขข้อมูลอื่นๆ' : 'เพิ่มข้อมูลอื่นๆ'"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
</q-header>
|
||||||
|
|
||||||
<q-separator />
|
<q-page-container>
|
||||||
<q-card-section class="q-p-sm">
|
<q-page class="q-pa-md">
|
||||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<datepicker
|
<datepicker
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="date"
|
v-model="date"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<template #year-overlay-value="{ value }">{{
|
<template #year-overlay-value="{ value }">{{
|
||||||
parseInt(value + 543)
|
parseInt(value + 543)
|
||||||
}}</template>
|
}}</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="dateRef"
|
ref="dateRef"
|
||||||
class="full-width inputgreen cursor-pointer"
|
class="full-width inputgreen cursor-pointer"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
:model-value="date2Thai(date)"
|
:model-value="date2Thai(date)"
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วันที่'}`"
|
:label="`${'วันที่'}`"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon
|
<q-icon
|
||||||
name="event"
|
name="event"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
:style="'color: var(--q-primary)'"
|
:style="'color: var(--q-primary)'"
|
||||||
>
|
>
|
||||||
</q-icon>
|
</q-icon>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</datepicker>
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
ref="detailRef"
|
||||||
|
class="full-width inputgreen cursor-pointer"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
</q-page>
|
||||||
<q-input
|
</q-page-container>
|
||||||
ref="detailRef"
|
|
||||||
class="full-width inputgreen cursor-pointer"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="detail"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'รายละเอียด'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-card-actions align="right">
|
<q-footer>
|
||||||
<q-btn
|
<q-separator color="grey-4" />
|
||||||
id="onSubmit"
|
<q-toolbar class="fit row wrap justify-end items-start content-start">
|
||||||
type="submit"
|
<q-btn
|
||||||
dense
|
dense
|
||||||
unelevated
|
unelevated
|
||||||
label="บันทึก"
|
label="บันทึก"
|
||||||
color="public"
|
id="onSubmit"
|
||||||
class="q-px-md"
|
type="submit"
|
||||||
>
|
color="public"
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
class="q-px-md"
|
||||||
</q-btn>
|
>
|
||||||
</q-card-actions>
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-toolbar>
|
||||||
|
</q-footer>
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-card>
|
</q-layout>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<DialogHistory v-model:modal="modalHistory" v-model:id="id" />
|
<DialogHistory v-model:modal="modalHistory" v-model:id="id" />
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,10 @@ const id = defineModel<string>("id", { required: true });
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||||
|
const historyPagination = ref({
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
const currentPage = ref<number>(1);
|
const currentPage = ref<number>(1);
|
||||||
const maxPage = ref<number>(1);
|
const maxPage = ref<number>(1);
|
||||||
const filterKeyword = ref<string>("");
|
const filterKeyword = ref<string>("");
|
||||||
|
|
@ -126,100 +129,97 @@ watch(modal, (status) => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card style="min-width: 80%">
|
<q-layout
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
view="lHh lpr lFf"
|
||||||
<DialogHeader
|
container
|
||||||
tittle="ประวัติแก้ไขอื่นๆ"
|
style="height: 80vh; min-width: 80%"
|
||||||
:close="() => (modal = false)"
|
class="bg-white"
|
||||||
/>
|
>
|
||||||
</q-card-section>
|
<q-header>
|
||||||
|
<q-toolbar>
|
||||||
<q-separator />
|
<DialogHeader
|
||||||
<q-card-section class="q-p-sm">
|
tittle="ประวัติแก้ไขอื่นๆ"
|
||||||
<div class="row q-gutter-sm q-mb-sm">
|
:close="() => (modal = false)"
|
||||||
<q-space />
|
|
||||||
<q-input
|
|
||||||
standout
|
|
||||||
dense
|
|
||||||
v-model="filterKeyword"
|
|
||||||
ref="filterRef"
|
|
||||||
outlined
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
debounce="300"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
v-if="filterKeyword == ''"
|
|
||||||
name="search"
|
|
||||||
@click.stop.prevent="filterKeyword = ''"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
<q-icon
|
|
||||||
v-if="filterKeyword"
|
|
||||||
name="cancel"
|
|
||||||
@click.stop.prevent="filterKeyword = ''"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
<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>
|
</q-toolbar>
|
||||||
<d-table
|
<q-separator color="grey-4" />
|
||||||
ref="table"
|
</q-header>
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
dense
|
|
||||||
:columns="columns"
|
|
||||||
:rows="rows"
|
|
||||||
:paging="true"
|
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
:filter="filterKeyword"
|
|
||||||
>
|
|
||||||
>
|
|
||||||
<template v-slot:header="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
<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.id">
|
|
||||||
<div>
|
|
||||||
{{ col.value ? col.value : "-" }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:pagination="scope">
|
<q-page-container>
|
||||||
<q-pagination
|
<q-page class="q-pa-md">
|
||||||
v-model="currentPage"
|
<div class="row q-gutter-sm q-mb-sm">
|
||||||
active-color="primary"
|
<q-space />
|
||||||
color="dark"
|
<q-input
|
||||||
:max="Number(maxPage)"
|
standout
|
||||||
size="sm"
|
dense
|
||||||
boundary-links
|
v-model="filterKeyword"
|
||||||
direction-links
|
ref="filterRef"
|
||||||
></q-pagination>
|
outlined
|
||||||
</template>
|
placeholder="ค้นหา"
|
||||||
</d-table>
|
debounce="300"
|
||||||
</q-card-section>
|
>
|
||||||
</q-card>
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filterKeyword == ''"
|
||||||
|
name="search"
|
||||||
|
@click.stop.prevent="filterKeyword = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
v-if="filterKeyword"
|
||||||
|
name="cancel"
|
||||||
|
@click.stop.prevent="filterKeyword = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<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>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
dense
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:paging="true"
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filterKeyword"
|
||||||
|
>
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<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.id">
|
||||||
|
<div>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-page>
|
||||||
|
</q-page-container>
|
||||||
|
</q-layout>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue