ทะเบียนประวัติ: แก้ตาราง, ประวัติแก้ไข, วันที่แก้ไข
This commit is contained in:
puriphatt
parent
bf8b9b1e6e
commit
3df3cc2a3b
8 changed files with 911 additions and 328 deletions
|
|
@ -8,7 +8,6 @@ import type { QTableProps, QForm } from "quasar";
|
|||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useInsigniaDataStore } from "@/modules/04_registryNew/stores/insignia";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
DataOption,
|
||||
|
|
@ -30,7 +29,6 @@ const {
|
|||
hideLoader,
|
||||
messageError,
|
||||
dialogConfirm,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
|
|
@ -54,6 +52,10 @@ const insigniaForm = reactive<RequestItemsObject>({
|
|||
note: "",
|
||||
});
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPageHistory = ref<number>(1);
|
||||
const currentPageHistory = ref<number>(1);
|
||||
const maxPage = ref<number>(1);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const modal = ref<boolean>(false);
|
||||
const modeView = ref<string>("table");
|
||||
|
|
@ -61,7 +63,6 @@ const filterSearch = ref("");
|
|||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<RequestItemsObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขเครื่องราชอิสริยาภรณ์");
|
||||
|
||||
const Ops = ref<InsigniaOps>({
|
||||
insigniaOptions: [],
|
||||
|
|
@ -378,22 +379,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
|
|
@ -416,7 +417,6 @@ const visibleColumns = ref<String[]>([
|
|||
"refCommandNo",
|
||||
"refCommandDate",
|
||||
"note",
|
||||
"createdAt",
|
||||
]);
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"insignia",
|
||||
|
|
@ -432,8 +432,8 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"dateAnnounce",
|
||||
"refCommandNo",
|
||||
"refCommandDate",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
async function fetchData() {
|
||||
|
|
@ -487,19 +487,6 @@ async function addEditData(editStatus: boolean = false) {
|
|||
}
|
||||
}
|
||||
|
||||
// async function clickDelete(dataId: string) {
|
||||
// try {
|
||||
// await http.delete(config.API.profileNewInsignById(dataId));
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// await fetchData();
|
||||
// modal.value = false;
|
||||
// } catch (error) {
|
||||
// messageError($q, error);
|
||||
// } finally {
|
||||
// hideLoader();
|
||||
// }
|
||||
// }
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
|
||||
modal.value = true;
|
||||
isEdit.value = editStatus;
|
||||
|
|
@ -606,45 +593,56 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="row items-center q-gutter-x-sm q-py-sm">
|
||||
<q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
|
||||
><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
outlined
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
<q-icon
|
||||
v-if="filterSearch == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterSearch"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modeView === 'table'"
|
||||
dense
|
||||
v-if="modeView == 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
class="q-mr-sm"
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
dense
|
||||
v-model="modeView"
|
||||
toggle-color="grey-4"
|
||||
dense
|
||||
class="no-shadow toggle-borderd"
|
||||
toggle-color="grey-4"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
|
|
@ -659,6 +657,7 @@ onMounted(async () => {
|
|||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
|
|
@ -669,14 +668,12 @@ onMounted(async () => {
|
|||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
ref="table"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:paging="true"
|
||||
:columns="columns"
|
||||
|
|
@ -684,6 +681,7 @@ onMounted(async () => {
|
|||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -730,27 +728,12 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="
|
||||
dialogRemove($q, async () => await clickDelete(props.row.id))
|
||||
"
|
||||
>
|
||||
<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-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
|
|
@ -795,6 +778,37 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</div>
|
||||
</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>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
|
|
@ -1111,30 +1125,123 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr class="cursor-pointer" :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
<q-dialog v-model="modalHistory" persistent>
|
||||
<q-card style="min-width: 80%">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader
|
||||
tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
|
||||
:close="() => (modalHistory = false)"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row q-gutter-sm q-mb-sm">
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterHistory"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterHistory == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterHistory"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumnsHistory"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columnsHistory"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:columns="columnsHistory"
|
||||
:rows="rowsHistory"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
:filter="filterHistory"
|
||||
>
|
||||
>
|
||||
<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-pagination
|
||||
v-model="currentPageHistory"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPageHistory)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
position: fixed !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import config from "@/app.config";
|
|||
import type { QTableProps, QForm } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
|
||||
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
|
||||
|
|
@ -22,7 +21,6 @@ const {
|
|||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
|
|
@ -39,15 +37,17 @@ const declHonorForm = reactive<RequestItemsObject>({
|
|||
refCommandDate: null,
|
||||
});
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPage = ref<number>(1);
|
||||
const currentPageHistory = ref<number>(1);
|
||||
const maxPageHistory = ref<number>(1);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const myForm = ref<QForm>();
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
const modeView = ref<string>("table");
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ");
|
||||
|
||||
const rows = ref<ResponseObject[]>([]);
|
||||
|
||||
|
|
@ -169,22 +169,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
|
|
@ -207,8 +207,8 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"issueDate",
|
||||
"refCommandNo",
|
||||
"refCommandDate",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
async function fetchData() {
|
||||
|
|
@ -255,19 +255,6 @@ async function addEditData(editStatus: boolean = false) {
|
|||
}
|
||||
}
|
||||
|
||||
// async function clickDelete(dataId: string) {
|
||||
// try {
|
||||
// await http.delete(config.API.profileNewHonorById(dataId));
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// await fetchData();
|
||||
// modal.value = false;
|
||||
// } catch (error) {
|
||||
// messageError($q, error);
|
||||
// } finally {
|
||||
// hideLoader();
|
||||
// }
|
||||
// }
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
|
||||
modal.value = true;
|
||||
isEdit.value = editStatus;
|
||||
|
|
@ -347,45 +334,56 @@ watch(
|
|||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="row items-center q-gutter-x-sm q-py-sm">
|
||||
<q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
|
||||
><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
outlined
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
<q-icon
|
||||
v-if="filterSearch == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterSearch"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
dense
|
||||
v-if="modeView == 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
class="q-mr-sm"
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
v-model="modeView"
|
||||
dense
|
||||
v-model="modelView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
toggle-color="grey-4"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
|
|
@ -396,36 +394,35 @@ watch(
|
|||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:paging="true"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -436,7 +433,7 @@ watch(
|
|||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<template v-slot:body="props" v-if="modeView === 'table'">
|
||||
<q-tr :props="props">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
|
|
@ -472,27 +469,12 @@ watch(
|
|||
>
|
||||
<q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="
|
||||
dialogRemove($q, async () => await clickDelete(props.row.id))
|
||||
"
|
||||
>
|
||||
<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-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
|
|
@ -537,6 +519,38 @@ watch(
|
|||
</q-card>
|
||||
</div>
|
||||
</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>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
|
|
@ -742,26 +756,123 @@ watch(
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
<q-dialog v-model="modalHistory" persistent>
|
||||
<q-card style="min-width: 80%">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader
|
||||
tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
|
||||
:close="() => (modalHistory = false)"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row q-gutter-sm q-mb-sm">
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterHistory"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterHistory == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterHistory"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumnsHistory"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columnsHistory"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:columns="columnsHistory"
|
||||
:rows="rowsHistory"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
:filter="filterHistory"
|
||||
>
|
||||
>
|
||||
<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-pagination
|
||||
v-model="currentPageHistory"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPageHistory)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import type { QTableProps, QForm } from "quasar";
|
|||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useResultsPerformDataStore } from "@/modules/04_registryNew/stores/ResultsPerformance";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/ResultsPerformance";
|
||||
|
|
@ -26,7 +25,6 @@ const {
|
|||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
|
|
@ -44,15 +42,17 @@ const resPerformForm = reactive<RequestItemsObject>({
|
|||
date: null,
|
||||
});
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPage = ref<number>(1);
|
||||
const currentPageHistory = ref<number>(1);
|
||||
const maxPageHistory = ref<number>(1);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const myForm = ref<QForm>();
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
const modeView = ref<string>("table");
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
|
||||
|
||||
const rows = ref<ResponseObject[]>([]);
|
||||
|
||||
|
|
@ -146,6 +146,16 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่ได้รับ",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
},
|
||||
{
|
||||
name: "point1Total",
|
||||
align: "left",
|
||||
|
|
@ -222,22 +232,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
|
|
@ -254,8 +264,8 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"pointSum",
|
||||
"name",
|
||||
"date",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
|
|
@ -308,19 +318,6 @@ async function addEditData(editStatus: boolean = false) {
|
|||
}
|
||||
}
|
||||
|
||||
// async function clickDelete(dataId: string) {
|
||||
// try {
|
||||
// await http.delete(config.API.profileNewAssessmentsById(dataId));
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// await fetchData();
|
||||
// modal.value = false;
|
||||
// } catch (error) {
|
||||
// messageError($q, error);
|
||||
// } finally {
|
||||
// hideLoader();
|
||||
// }
|
||||
// }
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
|
||||
modal.value = true;
|
||||
isEdit.value = editStatus;
|
||||
|
|
@ -390,45 +387,56 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="row items-center q-gutter-x-sm q-py-sm">
|
||||
<q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
|
||||
><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
outlined
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
<q-icon
|
||||
v-if="filterSearch == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterSearch"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
dense
|
||||
v-if="modeView == 'table'"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
class="q-mr-sm"
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
v-model="modeView"
|
||||
dense
|
||||
v-model="modelView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
toggle-color="grey-4"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
|
|
@ -439,35 +447,35 @@ onMounted(async () => {
|
|||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:paging="true"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
:card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -478,7 +486,7 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<template v-slot:body="props" v-if="modeView === 'table'">
|
||||
<q-tr :props="props">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
|
|
@ -514,27 +522,12 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="
|
||||
dialogRemove($q, async () => await clickDelete(props.row.id))
|
||||
"
|
||||
>
|
||||
<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-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
|
|
@ -579,6 +572,37 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</div>
|
||||
</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>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
|
|
@ -642,6 +666,11 @@ onMounted(async () => {
|
|||
input-class="text-right "
|
||||
:label="`${'ส่วนที่1 (คะแนน)'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
|
||||
@update:model-value="
|
||||
resPerformForm.point1Total > 100
|
||||
? (resPerformForm.point1Total = 100)
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -658,6 +687,11 @@ onMounted(async () => {
|
|||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
|
||||
]"
|
||||
@update:model-value="
|
||||
resPerformForm.point1 > 100
|
||||
? (resPerformForm.point1 = 100)
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -672,6 +706,11 @@ onMounted(async () => {
|
|||
input-class="text-right"
|
||||
:label="`${'ส่วนที่2 (คะแนน)'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
|
||||
@update:model-value="
|
||||
resPerformForm.point2Total > 100
|
||||
? (resPerformForm.point2Total = 100)
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -688,6 +727,11 @@ onMounted(async () => {
|
|||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
|
||||
]"
|
||||
@update:model-value="
|
||||
resPerformForm.point2 > 100
|
||||
? (resPerformForm.point2 = 100)
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -702,6 +746,11 @@ onMounted(async () => {
|
|||
input-class="text-right"
|
||||
:label="`${'ผลรวม (คะแนน)'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
|
||||
@update:model-value="
|
||||
resPerformForm.pointSumTotal > 100
|
||||
? (resPerformForm.pointSumTotal = 100)
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -718,6 +767,11 @@ onMounted(async () => {
|
|||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
|
||||
]"
|
||||
@update:model-value="
|
||||
resPerformForm.pointSum > 100
|
||||
? (resPerformForm.pointSum = 100)
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-subtitle2 col-12 row items-center">
|
||||
|
|
@ -748,26 +802,123 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
<q-dialog v-model="modalHistory" persistent>
|
||||
<q-card style="min-width: 80%">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader
|
||||
tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
|
||||
:close="() => (modalHistory = false)"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row q-gutter-sm q-mb-sm">
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterHistory"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterHistory == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterHistory"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumnsHistory"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columnsHistory"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:columns="columnsHistory"
|
||||
:rows="rowsHistory"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
:filter="filterHistory"
|
||||
>
|
||||
>
|
||||
<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-pagination
|
||||
v-model="currentPageHistory"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPageHistory)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -40,8 +40,8 @@ const formFilter = reactive<FormFilter>({
|
|||
const visibleColumns = ref<String[]>([
|
||||
"date",
|
||||
"detail",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -66,22 +66,22 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
|
|
@ -101,8 +101,8 @@ function getHistory() {
|
|||
id: e.id,
|
||||
date: e.date,
|
||||
detail: e.detail,
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: new Date(e.createdAt),
|
||||
lastUpdateFullName: e.lastUpdateFullName,
|
||||
lastUpdatedAt: new Date(e.lastUpdatedAt),
|
||||
});
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import config from "@/app.config";
|
|||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
|
||||
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
|
||||
|
|
@ -30,10 +29,11 @@ const profileId = ref<string>(
|
|||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPage = ref<number>(1);
|
||||
const modal = ref<boolean>(false);
|
||||
const informaData = ref<ResponseObject>();
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
||||
|
|
@ -746,26 +746,123 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:filter="filterHistory"
|
||||
:columns="columnsHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
<q-dialog v-model="modalHistory" persistent>
|
||||
<q-card style="min-width: 80%">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader
|
||||
tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
|
||||
:close="() => (modalHistory = false)"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row q-gutter-sm q-mb-sm">
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterHistory"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterHistory == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterHistory"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumnsHistory"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columnsHistory"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:columns="columnsHistory"
|
||||
:rows="rowsHistory"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
:filter="filterHistory"
|
||||
>
|
||||
>
|
||||
<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-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useAddressDataStore } from "@/modules/04_registryNew/stores/Address";
|
||||
|
||||
|
|
@ -37,10 +36,11 @@ const profileId = ref<string>(
|
|||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPage = ref<number>(1);
|
||||
const modal = ref<boolean>(false);
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่");
|
||||
const filterHistory = ref<string>("");
|
||||
|
||||
const id = ref<string>("");
|
||||
|
|
@ -810,26 +810,123 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<HistoryTable
|
||||
v-model:modal="modalHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
:rows="rowsHistory"
|
||||
:filter="filterHistory"
|
||||
:columns="columnsHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</HistoryTable>
|
||||
<q-dialog v-model="modalHistory" persistent>
|
||||
<q-card style="min-width: 80%">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader
|
||||
tittle="ประวัติแก้ไขข้อมูลที่อยู่"
|
||||
:close="() => (modalHistory = false)"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row q-gutter-sm q-mb-sm">
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterHistory"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
debounce="300"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterHistory == ''"
|
||||
name="search"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="filterHistory"
|
||||
name="cancel"
|
||||
@click.stop.prevent="filterHistory = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumnsHistory"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columnsHistory"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:columns="columnsHistory"
|
||||
:rows="rowsHistory"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
:filter="filterHistory"
|
||||
>
|
||||
>
|
||||
<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-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
align: "left",
|
||||
label: "วัน เดือน ปี",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
|
|
@ -77,22 +77,22 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
|
|
@ -106,8 +106,8 @@ const visibleColumns = ref<string[]>([
|
|||
"detail",
|
||||
"refCommandNo",
|
||||
"refCommandDate",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
|
|
@ -151,7 +151,7 @@ watch(modal, (status) => {
|
|||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
|
||||
<q-space />
|
||||
<q-input
|
||||
dense
|
||||
|
|
@ -222,6 +222,26 @@ watch(modal, (status) => {
|
|||
direction-links
|
||||
></q-pagination>
|
||||
</template> -->
|
||||
<template v-slot:no-data="{ icon, message, filter }">
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ interface RowList {
|
|||
id: string;
|
||||
date: Date | null;
|
||||
detail: string;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdatedAt: Date;
|
||||
}
|
||||
|
||||
interface FormFilter {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue