hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-04-02 14:42:12 +07:00
commit 432024267f
15 changed files with 1761 additions and 1684 deletions
Download patch file Download diff file Expand all files Collapse all files

469
src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
View file

@ -102,8 +102,8 @@ const visibleColumnsHistory = ref<String[]>([
"govAgeAbsent", "govAgeAbsent",
"govAgePlus", "govAgePlus",
"reasonSameDate", "reasonSameDate",
"createdFullName", "lastUpdateFullName",
"createdAt", "lastUpdatedAt",
]); ]);
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
@ -212,6 +212,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
label: "วันที่บรรจุ", label: "วันที่บรรจุ",
sortable: true, sortable: true,
field: "dateAppoint", field: "dateAppoint",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -223,6 +224,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
label: "เริ่มปฎิบัติราชการ", label: "เริ่มปฎิบัติราชการ",
sortable: true, sortable: true,
field: "dateStart", field: "dateStart",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -234,6 +236,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
label: "วันเกษียณอายุ", label: "วันเกษียณอายุ",
sortable: true, sortable: true,
field: "retireDate", field: "retireDate",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -284,22 +287,23 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "createdFullName", name: "lastUpdateFullName",
align: "left", align: "left",
label: "ผู้ดำเนินการ", label: "ผู้ดำเนินการ",
sortable: true, sortable: true,
field: "createdFullName", field: "lastUpdateFullName",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "createdAt", name: "lastUpdatedAt",
align: "left", align: "left",
label: "วันที่แก้ไข", label: "วันที่แก้ไข",
sortable: true, sortable: true,
field: "createdAt", field: "lastUpdatedAt",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -311,9 +315,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
function openDialogEdit() { function openDialogEdit() {
modalEdit.value = true; modalEdit.value = true;
containDate.value = formMain.containDate ?formMain.containDate:null containDate.value = formMain.containDate ? formMain.containDate : null;
workDate.value = formMain.workDate ?formMain.workDate:null workDate.value = formMain.workDate ? formMain.workDate : null;
reasonSameDate.value = formMain.reasonSameDate ?formMain.reasonSameDate:null reasonSameDate.value = formMain.reasonSameDate
? formMain.reasonSameDate
: null;
} }
function openDialogHistory() { function openDialogHistory() {
@ -352,7 +358,11 @@ function onSubmit() {
.patch(config.API.profileNewGovernmentById(profileId.value), { .patch(config.API.profileNewGovernmentById(profileId.value), {
dateAppoint: containDate.value, dateAppoint: containDate.value,
dateStart: workDate.value, dateStart: workDate.value,
reasonSameDate: reasonSameDate.value, reasonSameDate:
dateToISO(containDate.value as Date) ===
dateToISO(workDate.value as Date)
? ""
: reasonSameDate.value,
}) })
.then((res) => { .then((res) => {
closeDialog(); closeDialog();
@ -375,7 +385,6 @@ function getData() {
http http
.get(config.API.profileNewGovernmentById(profileId.value)) .get(config.API.profileNewGovernmentById(profileId.value))
.then((res) => { .then((res) => {
console.log(res.data.result);
const data = res.data.result; const data = res.data.result;
formMain.ocId = data.org; //สังกัด formMain.ocId = data.org; //สังกัด
formMain.positionId = data.position; //ตำแหน่ง formMain.positionId = data.position; //ตำแหน่ง
@ -431,6 +440,8 @@ function getDataHistory() {
reasonSameDate: e.reasonSameDate, reasonSameDate: e.reasonSameDate,
createdFullName: e.createdFullName, createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt), createdAt: new Date(e.createdAt),
lastUpdatedAt: e.lastUpdatedAt,
lastUpdateFullName: e.lastUpdateFullName,
}); });
}); });
}) })
@ -622,236 +633,246 @@ onMounted(() => {
<!-- dialog edit --> <!-- dialog edit -->
<q-dialog v-model="modalEdit" persistent> <q-dialog v-model="modalEdit" persistent>
<q-card style="min-width: 600px"> <q-layout
view="lHh lpr lFf"
container
style="height: 80vh"
class="bg-white"
>
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm">
<q-card-section class="flex justify-between" style="padding: 0"> <q-header>
<DialogHeader tittle="แก้ไขข้อมูล" :close="closeDialog" /> <q-toolbar>
</q-card-section> <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<q-separator /> <q-page-container>
<q-card-section class="q-pa-md"> <q-page class="q-pa-md">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-6"> <div class="col-6">
<datepicker <datepicker
v-model="containDate" v-model="containDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </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="containDateRef" ref="containDateRef"
class="full-width inputgreen cursor-pointer" class="full-width inputgreen cursor-pointer"
hide-bottom-space hide-bottom-space
dense dense
outlined outlined
:model-value="containDate !== null :model-value="containDate !== null
? date2Thai(containDate as Date) ? date2Thai(containDate as Date)
: null : null
" "
:rules="[ :rules="[
(val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ', (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
]" ]"
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>
<div class="col-6"> <div class="col-6">
<datepicker <datepicker
v-model="workDate" v-model="workDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </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="workDateRef" ref="workDateRef"
class="full-width inputgreen cursor-pointer" class="full-width inputgreen cursor-pointer"
hide-bottom-space hide-bottom-space
dense dense
outlined outlined
:model-value="workDate !== null :model-value="workDate !== null
? date2Thai(workDate as Date) ? date2Thai(workDate as Date)
: null : null
" "
:rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']" :rules="[
label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ" (val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ',
> ]"
<template v-slot:prepend> label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
<q-icon >
name="event" <template v-slot:prepend>
class="cursor-pointer" <q-icon
:style="'color: var(--q-primary)'" name="event"
> class="cursor-pointer"
</q-icon> :style="'color: var(--q-primary)'"
</template> >
</q-input> </q-icon>
</template> </template>
</datepicker> </q-input>
</template>
</datepicker>
</div>
<div
class="col-12"
v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
>
<q-input
ref="reasonSameDateRef"
class="full-width inputgreen cursor-pointer"
label="เหตุผลกรณีไม่ตรงกัน"
type="textarea"
outlined
dense
:rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
v-model="reasonSameDate"
/>
</div>
</div> </div>
<div </q-page>
class="col-12" </q-page-container>
v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
>
<q-input
ref="reasonSameDateRef"
class="full-width inputgreen cursor-pointer"
label="เหตุผลกรณีไม่ตรงกัน"
type="textarea"
outlined
dense
:rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
v-model="reasonSameDate"
/>
</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>
</form> </form>
</q-card> </q-layout>
</q-dialog> </q-dialog>
<!-- dialog History --> <!-- dialog History -->
<q-dialog v-model="modalHistory" persistent> <q-dialog v-model="modalHistory" 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="() => (modalHistory = !modalHistory)" class="bg-white"
/> >
</q-card-section> <q-header>
<q-toolbar>
<q-separator /> <DialogHeader
tittle="ประวัติแก้ไขข้อมูลราชการ"
<q-card-section class="q-pa-sm"> :close="() => (modalHistory = !modalHistory)"
<div class="row q-pb-sm q-gutter-x-sm">
<q-space />
<q-input
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
class="col-2"
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="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> </q-toolbar>
<d-table <q-separator color="grey-4" />
ref="table" </q-header>
:columns="columnsHistory"
:rows="rowsHistory" <q-page-container>
flat <q-page class="q-pa-md">
bordered <div class="row q-pb-sm q-gutter-x-sm">
:paging="true" <q-space />
dense <q-input
class="custom-header-table" standout
:filter="filterKeyword" dense
:visible-columns="visibleColumnsHistory" v-model="filterKeyword"
> ref="filterRef"
<template v-slot:header="props"> outlined
<q-tr :props="props"> placeholder="ค้นหา"
<q-th class="col-2"
v-for="col in props.cols" debounce="300"
:key="col.name" >
:props="props" <template v-slot:append>
style="color: #000000; font-weight: 500" <q-icon
> v-if="filterKeyword == ''"
<span class="text-weight-medium">{{ col.label }}</span> name="search"
</q-th> @click.stop.prevent="filterKeyword = ''"
<q-th auto-width></q-th> class="cursor-pointer"
</q-tr> />
</template> <q-icon
<template v-slot:body="props"> v-if="filterKeyword"
<q-tr :props="props" class="cursor-pointer"> name="cancel"
<q-td v-for="col in props.cols" :key="col.name" :props="props"> @click.stop.prevent="filterKeyword = ''"
<div class="cursor-pointer"
v-if=" />
col.name == 'dateStart' || </template>
col.name == 'dateAppoint' || </q-input>
col.name == 'createdAt' || <q-select
col.name == 'retireDate' v-model="visibleColumnsHistory"
" multiple
class="table_ellipsis" 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"
:columns="columnsHistory"
:rows="rowsHistory"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:filter="filterKeyword"
:visible-columns="visibleColumnsHistory"
>
<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"
> >
{{ date2Thai(col.value) }} <span class="text-weight-medium">{{ col.label }}</span>
</div> </q-th>
<div v-else> <q-th auto-width></q-th>
{{ col.value ? col.value : "-" }} </q-tr>
</div> </template>
</q-td> <template v-slot:body="props">
</q-tr> <q-tr :props="props" class="cursor-pointer">
</template> <q-td v-for="col in props.cols" :key="col.name" :props="props">
</d-table> <div>
</q-card-section> {{ col.value ? col.value : "-" }}
</q-card> </div>
</q-td>
</q-tr>
</template>
</d-table>
</q-page>
</q-page-container>
</q-layout>
</q-dialog> </q-dialog>
</template> </template>

356
src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
View file

@ -58,6 +58,10 @@ const formFilter = reactive<FormFilter>({
const currentPage = ref<number>(1); const currentPage = ref<number>(1);
const maxPage = ref<number>(1); const maxPage = ref<number>(1);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"level", "level",
@ -408,18 +412,20 @@ onMounted(async () => {
</div> </div>
<d-table <d-table
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:grid="mode === 'card'"
ref="table" ref="table"
row-key="id"
flat flat
bordered bordered
dense dense
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
:grid="mode === 'card'"
:paging="true" :paging="true"
:filter="filterKeyword"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]" :rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:filter="filterKeyword"
> >
> >
<template v-slot:header="props"> <template v-slot:header="props">
@ -562,191 +568,187 @@ onMounted(async () => {
</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 @submit.prevent greedy @validation-success="onSubmit()"> <q-form @submit.prevent greedy @validation-success="onSubmit()">
<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="disciplineData.date" v-model="disciplineData.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(disciplineData.date)" :model-value="date2Thai(disciplineData.date)"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]" :rules="[(val:string) => !!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="primary"
edit >
? 'color: var(--q-primary)' </q-icon>
: 'color: var(--q-grey)' </template>
" </q-input>
> </template>
</q-icon> </datepicker>
</template> </div>
</q-input> <div class="col-xs-6 col-sm-6 col-md-6">
</template> <q-input
</datepicker> ref="detailRef"
</div> class="full-width inputgreen cursor-pointer"
<div class="col-xs-6 col-sm-6 col-md-6"> outlined
<q-input dense
ref="detailRef" lazy-rules
class="full-width inputgreen cursor-pointer" v-model="disciplineData.detail"
outlined :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
dense hide-bottom-space
lazy-rules :label="`${'รายละเอียด'}`"
v-model="disciplineData.detail" />
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]" </div>
hide-bottom-space <div class="col-xs-6 col-sm-6 col-md-6">
:label="`${'รายละเอียด'}`" <selector
/> class="full-width inputgreen cursor-pointer"
</div> outlined
<div class="col-xs-6 col-sm-6 col-md-6"> dense
<selector lazy-rules
class="full-width inputgreen cursor-pointer" v-model="disciplineData.level"
outlined :label="`${'ระดับการลงโทษทางวินัย'}`"
dense emit-value
lazy-rules map-options
v-model="disciplineData.level" option-label="name"
:label="`${'ระดับการลงโทษทางวินัย'}`" :options="Ops.levelOptions"
emit-value option-value="id"
map-options use-input
option-label="name" clearable
:options="Ops.levelOptions" hide-bottom-space
option-value="id" input-debounce="0"
use-input @filter="(inputValue:string,
clearable
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions' doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
) " ) "
/> />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
v-model="disciplineData.unStigma"
hide-bottom-space
:label="`${'ล้างมลทิน'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
ref="refCommandNoRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
v-model="disciplineData.refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
>
<template v-slot:append>
<q-icon name="mdi-file" class="cursor-pointer" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="disciplineData.refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
ref="dateRef"
class="full-width inputgreen cursor-pointer"
outlined
clearable
dense
:model-value="date2Thai(disciplineData.refCommandDate)"
hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
@clear="disciplineData.refCommandDate = null"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> </q-page>
<q-input </q-page-container>
class="full-width inputgreen cursor-pointer"
outlined
dense
v-model="disciplineData.unStigma"
hide-bottom-space
:label="`${'ล้างมลทิน'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
ref="refCommandNoRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
v-model="disciplineData.refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
>
<template v-slot:append>
<q-icon name="mdi-file" class="cursor-pointer" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="disciplineData.refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
ref="dateRef"
class="full-width inputgreen cursor-pointer"
outlined
clearable
dense
:model-value="date2Thai(disciplineData.refCommandDate)"
hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
@clear="disciplineData.refCommandDate = null"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</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" />

203
src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
View file

@ -35,7 +35,10 @@ const formFilter = reactive<FormFilter>({
isShowRetire: false, isShowRetire: false,
isProbation: false, isProbation: false,
}); });
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"level", "level",
"detail", "detail",
@ -181,107 +184,105 @@ 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 v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ 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"
v-model:pagination="historyPagination"
: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 v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ 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>

311
src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
View file

@ -37,6 +37,10 @@ const {
dateToISO, dateToISO,
} = mixin; } = mixin;
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const mode = ref<string>("table"); const mode = ref<string>("table");
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const currentPage = ref<number>(1); const currentPage = ref<number>(1);
@ -203,7 +207,6 @@ function openDialogAdd() {
http http
.get(config.API.profileNewLeaveType()) .get(config.API.profileNewLeaveType())
.then((res) => { .then((res) => {
console.log(res.data.result);
const dataOp = res.data.result.map((item: any) => ({ const dataOp = res.data.result.map((item: any) => ({
id: item.id, id: item.id,
name: item.name, name: item.name,
@ -350,11 +353,13 @@ function validateForm() {
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
if (edit.value == false) { dialogConfirm($q, async () => {
saveData(); if (edit.value == false) {
} else { saveData();
editData(); } else {
} editData();
}
});
} }
} }
@ -533,6 +538,7 @@ onMounted(() => {
:rows="rows" :rows="rows"
:grid="mode === 'card'" :grid="mode === 'card'"
:paging="true" :paging="true"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]" :rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:filter="filterKeyword" :filter="filterKeyword"
@ -660,166 +666,165 @@ 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"
>
<form @submit.prevent="validateForm"> <form @submit.prevent="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">
<q-select <q-select
ref="typeLeaveRef" ref="typeLeaveRef"
class="full-width inputgreen cursor-pointer" class="full-width inputgreen cursor-pointer"
outlined outlined
dense dense
lazy-rules lazy-rules
v-model="typeLeave" v-model="typeLeave"
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
hide-bottom-space hide-bottom-space
:label="`${'ประเภทการลา'}`" :label="`${'ประเภทการลา'}`"
@update:modelValue="clickEditRowType" @update:modelValue="clickEditRowType"
map-options map-options
option-label="name" option-label="name"
:options="typeLeaveOption" :options="typeLeaveOption"
option-value="id" option-value="id"
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue:string, @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption' doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
) " ) "
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-6">
<datepicker <datepicker
:readonly="!typeLeave" :readonly="!typeLeave"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="dateRange" v-model="dateRange"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
range range
> >
<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
:readonly="!typeLeave" :readonly="!typeLeave"
class="full-width inputgreen cursor-pointer" class="full-width inputgreen cursor-pointer"
outlined outlined
dense dense
ref="dateRangeRef" ref="dateRangeRef"
:model-value="dateThaiRange(dateRange)" :model-value="dateThaiRange(dateRange)"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]" :rules="[(val:string) => !!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="primary"
edit >
? 'color: var(--q-primary)' </q-icon>
: 'color: var(--q-grey)' </template>
" </q-input>
> </template>
</q-icon> </datepicker>
</template> </div>
</q-input> <div class="col-xs-6 col-sm-6 col-md-6">
</template> <q-input
</datepicker> ref="numLeaveRef"
</div> class="full-width inputgreen cursor-pointer"
<div class="col-xs-6 col-sm-6 col-md-6"> outlined
<q-input dense
ref="numLeaveRef" lazy-rules
class="full-width inputgreen cursor-pointer" v-model="numLeave"
outlined type="number"
dense :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
lazy-rules hide-bottom-space
v-model="numLeave" :label="`${'จำนวนวันที่ลา'}`"
type="number" />
:rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]" </div>
hide-bottom-space <div class="col-xs-6 col-sm-6 col-md-6">
:label="`${'จำนวนวันที่ลา'}`" <q-select
/> ref="statLeaveRef"
</div> class="full-width inputgreen cursor-pointer"
<div class="col-xs-6 col-sm-6 col-md-6"> outlined
<q-select dense
ref="statLeaveRef" lazy-rules
class="full-width inputgreen cursor-pointer" v-model="statLeave"
outlined :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
dense hide-bottom-space
lazy-rules :label="`${'สถานะการลา'}`"
v-model="statLeave" emit-value
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]" map-options
hide-bottom-space option-label="name"
:label="`${'สถานะการลา'}`" :options="statLeaveOption"
emit-value option-value="id"
map-options use-input
option-label="name" input-debounce="0"
:options="statLeaveOption" @filter="(inputValue:string,
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption' doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
) " ) "
/> />
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
ref="reasonRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
v-model="reason"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
hide-bottom-space
:label="`${'เหตุผล'}`"
/>
</div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> </q-page>
<q-input </q-page-container>
ref="reasonRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
v-model="reason"
type="textarea"
:rules="[(val:string) => !!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>
</form> </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" />

226
src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
View file

@ -19,8 +19,6 @@ const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const rows = ref<DetailData[]>([]); //select data history const rows = ref<DetailData[]>([]); //select data history
const formFilter = reactive<FormFilter>({ const formFilter = reactive<FormFilter>({
@ -36,6 +34,10 @@ const formFilter = reactive<FormFilter>({
isProbation: false, isProbation: false,
}); });
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"no", "no",
"typeLeave", "typeLeave",
@ -212,118 +214,116 @@ 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 v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name == 'dateLeave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status'">
{{ statusLeave(col.value) }}
</div>
<div v-else>
{{ 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"
v-model:pagination="historyPagination"
: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 v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name == 'dateLeave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status'">
{{ statusLeave(col.value) }}
</div>
<div v-else>
{{ 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>

417
src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
View file

@ -52,6 +52,10 @@ const dutyData = reactive<RequestItemsObject>({
refCommandDate: null, refCommandDate: null,
}); });
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const rows = ref<RequestItemsObject[]>([]); const rows = ref<RequestItemsObject[]>([]);
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const mode = ref<string>("table"); const mode = ref<string>("table");
@ -373,6 +377,7 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]" :rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:filter="filterKeyword" :filter="filterKeyword"
v-model:pagination="pagination"
> >
> >
<template v-slot:header="props"> <template v-slot:header="props">
@ -510,226 +515,220 @@ onMounted(async () => {
</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>
<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 @submit.prevent greedy @validation-success="onSubmit()"> <q-form @submit.prevent greedy @validation-success="onSubmit()">
<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="dutyData.dateStart" v-model="dutyData.dateStart"
: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="dateStartRef" ref="dateStartRef"
class="full-width inputgreen cursor-pointer" class="full-width inputgreen cursor-pointer"
outlined outlined
dense dense
:model-value="date2Thai(dutyData.dateStart)" :model-value="date2Thai(dutyData.dateStart)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[
hide-bottom-space (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`,
:label="`${'วันที่เริ่มต้น'}`" ]"
> hide-bottom-space
<template v-slot:prepend> :label="`${'วันที่เริ่มต้น'}`"
<q-icon >
name="event" <template v-slot:prepend>
class="cursor-pointer" <q-icon
:style=" name="event"
edit class="cursor-pointer"
? 'color: var(--q-primary)' color="primary"
: 'color: var(--q-grey)' >
" </q-icon>
> </template>
</q-icon> </q-input>
</template> </template>
</q-input> </datepicker>
</template> </div>
</datepicker> <div class="col-xs-6 col-sm-6 col-md-6">
</div> <datepicker
<div class="col-xs-6 col-sm-6 col-md-6"> menu-class-name="modalfix"
<datepicker v-model="dutyData.dateEnd"
menu-class-name="modalfix" :locale="'th'"
v-model="dutyData.dateEnd" autoApply
:locale="'th'" :enableTimePicker="false"
autoApply :min-date="dutyData.dateStart"
:enableTimePicker="false" :readonly="!dutyData.dateStart"
:min-date="dutyData.dateStart" week-start="0"
:readonly="!dutyData.dateStart" >
week-start="0" <template #year="{ year }">{{ year + 543 }}</template>
> <template #year-overlay-value="{ value }">{{
<template #year="{ year }">{{ year + 543 }}</template> parseInt(value + 543)
<template #year-overlay-value="{ value }">{{ }}</template>
parseInt(value + 543) <template #trigger>
}}</template> <q-input
<template #trigger> ref="dateEndRef"
<q-input :readonly="!dutyData.dateStart"
ref="dateEndRef" class="full-width inputgreen cursor-pointer"
:readonly="!dutyData.dateStart" dense
class="full-width inputgreen cursor-pointer" outlined
dense :model-value="date2Thai(dutyData.dateEnd)"
outlined :rules="[
:model-value="date2Thai(dutyData.dateEnd)" (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="primary"
edit >
? 'color: var(--q-primary)' </q-icon>
: 'color: var(--q-grey)' </template>
" </q-input>
> </template>
</q-icon> </datepicker>
</template> </div>
</q-input> <div class="col-12">
</template> <q-input
</datepicker> ref="referenceRef"
</div> class="full-width inputgreen cursor-pointer"
<div class="col-12"> outlined
<q-input dense
ref="referenceRef" lazy-rules
class="full-width inputgreen cursor-pointer" autogrow
outlined v-model="dutyData.reference"
dense :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
lazy-rules hide-bottom-space
autogrow :label="`${'เอกสารอ้างอิง'}`"
v-model="dutyData.reference" />
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]" </div>
hide-bottom-space <div class="col-12">
:label="`${'เอกสารอ้างอิง'}`" <q-input
/> ref="detailRef"
</div> class="full-width inputgreen cursor-pointer"
<div class="col-12"> outlined
<q-input dense
ref="detailRef" lazy-rules
class="full-width inputgreen cursor-pointer" autogrow
outlined v-model="dutyData.detail"
dense :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
lazy-rules hide-bottom-space
autogrow :label="`${'รายละเอียด'}`"
v-model="dutyData.detail" />
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]" </div>
hide-bottom-space <div class="col-xs-6 col-sm-6 col-md-6">
:label="`${'รายละเอียด'}`" <q-input
/> class="full-width inputgreen cursor-pointer"
</div> outlined
<div class="col-xs-6 col-sm-6 col-md-6"> dense
<q-input v-model="dutyData.refCommandNo"
class="full-width inputgreen cursor-pointer" :label="`${'เลขที่คำสั่ง'}`"
outlined >
dense <template v-slot:append>
v-model="dutyData.refCommandNo" <q-icon name="mdi-file" class="cursor-pointer" />
:label="`${'เลขที่คำสั่ง'}`" </template>
> </q-input>
<template v-slot:append> </div>
<q-icon name="mdi-file" class="cursor-pointer" /> <div class="col-xs-6 col-sm-6 col-md-6">
</template> <datepicker
</q-input> menu-class-name="modalfix"
</div> v-model="dutyData.refCommandDate"
<div class="col-xs-6 col-sm-6 col-md-6"> :locale="'th'"
<datepicker autoApply
menu-class-name="modalfix" :enableTimePicker="false"
v-model="dutyData.refCommandDate" week-start="0"
:locale="'th'" >
autoApply <template #year="{ year }">{{ year + 543 }}</template>
:enableTimePicker="false" <template #year-overlay-value="{ value }">{{
week-start="0" parseInt(value + 543)
> }}</template>
<template #year="{ year }">{{ year + 543 }}</template> <template #trigger>
<template #year-overlay-value="{ value }">{{ <q-input
parseInt(value + 543) class="full-width inputgreen cursor-pointer"
}}</template> outlined
<template #trigger> dense
<q-input lazy-rules
class="full-width inputgreen cursor-pointer" :borderless="!edit"
outlined :model-value="
dense
lazy-rules
:borderless="!edit"
:model-value="
dutyData.refCommandDate == null ? null : date2Thai(dutyData.refCommandDate as Date) dutyData.refCommandDate == null ? null : date2Thai(dutyData.refCommandDate as Date)
" "
hide-bottom-space hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`" :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
clearable clearable
@clear="dutyData.refCommandDate = null" @clear="dutyData.refCommandDate = null"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
<template
v-if="dutyData.refCommandDate && edit"
v-slot:append
> >
<q-icon <template v-slot:prepend>
name="cancel" <q-icon
@click.stop.prevent="dutyData.refCommandDate = null" name="event"
class="cursor-pointer" class="cursor-pointer"
/> color="primary"
</template> >
</q-input> </q-icon>
</template> </template>
</datepicker> <template
v-if="dutyData.refCommandDate && edit"
v-slot:append
>
</template>
</q-input>
</template>
</datepicker>
</div>
</div> </div>
</div> </q-page>
</q-card-section> </q-page-container>
<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" />

216
src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
View file

@ -36,6 +36,10 @@ const formFilter = reactive<FormFilter>({
isProbation: false, isProbation: false,
}); });
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"dateStart", "dateStart",
"dateEnd", "dateEnd",
@ -43,8 +47,8 @@ const visibleColumns = ref<String[]>([
"reference", "reference",
"refCommandNo", "refCommandNo",
"refCommandDate", "refCommandDate",
"createdFullName", "lastUpdateFullName",
"createdAt", "lastUpdatedAt",
]); ]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
@ -117,22 +121,22 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "createdFullName", name: "lastUpdateFullName",
align: "left", align: "left",
label: "ผู้ดำเนินการ", label: "ผู้ดำเนินการ",
sortable: true, sortable: true,
field: "createdFullName", field: "lastUpdateFullName",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "createdAt", name: "lastUpdatedAt",
align: "left", align: "left",
label: "วันที่แก้ไข", label: "วันที่แก้ไข",
sortable: true, sortable: true,
field: "createdAt", field: "lastUpdatedAt",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v), format: (v) => date2Thai(v),
@ -159,6 +163,8 @@ function getHistory() {
e.refCommandDate == null ? null : new Date(e.refCommandDate), e.refCommandDate == null ? null : new Date(e.refCommandDate),
createdFullName: e.createdFullName, createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt), createdAt: new Date(e.createdAt),
lastUpdateFullName: e.lastUpdateFullName,
lastUpdatedAt: e.lastUpdatedAt,
}); });
}); });
}) })
@ -182,107 +188,105 @@ 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 v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else class="table_ellipsis">
{{ 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"
v-model:pagination="historyPagination"
: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 v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize +
props.rowIndex +
1
}}
</div>
<div v-else class="table_ellipsis">
{{ 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>

2
src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
View file

@ -602,7 +602,7 @@ watch(
:rows="rows" :rows="rows"
:columns="columns" :columns="columns"
:filter="filterSearch" :filter="filterSearch"
:rows-per-page-options="[0]" :rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48" :virtual-scroll-sticky-size-start="48"
> >

12
src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
View file

@ -87,8 +87,8 @@ const visibleColumnsHistory = ref<String[]>([
"registrationSame", "registrationSame",
"registrationSubDistrict", "registrationSubDistrict",
"registrationZipCode", "registrationZipCode",
"createdFullName", "lastUpdateFullName",
"createdAt", "lastUpdatedAt",
]); ]);
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
@ -224,22 +224,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "createdFullName", name: "lastUpdateFullName",
align: "left", align: "left",
label: "ผู้ดำเนินการ", label: "ผู้ดำเนินการ",
sortable: true, sortable: true,
field: "createdFullName", field: "lastUpdateFullName",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "createdAt", name: "lastUpdatedAt",
align: "left", align: "left",
label: "วันที่แก้ไข", label: "วันที่แก้ไข",
sortable: true, sortable: true,
field: "createdAt", field: "lastUpdatedAt",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v), format: (v) => date2Thai(v),

579
src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
View file

@ -521,136 +521,135 @@ onMounted(() => {
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table> </d-table>
<q-dialog v-model="modalDialogSalary" persistent full-width> <q-dialog v-model="modalDialogSalary" persistent>
<q-card> <q-layout
view="lHh lpr lFf"
container
style="height: 80vh; min-width: 80%"
class="bg-white"
>
<q-form greedy @submit.prevent @validation-success="onSubmit"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader <q-header>
:tittle=" <q-toolbar>
isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน' <DialogHeader
" :tittle="
:close="onClickCloseDialog" isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
/> "
<q-separator /> :close="onClickCloseDialog"
<q-card-section class="q-pa-md bg-grey-1"> />
<div class="row col-12 q-col-gutter-sm"> </q-toolbar>
<q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm"> <q-separator color="grey-4" />
<div class="col-xs-6 col-sm-6 col-md-6"> </q-header>
<datepicker
v-model="formDataSalary.date" <q-page-container>
:locale="'th'" <q-page class="q-pa-md">
autoApply <div class="row col-12 q-col-gutter-sm">
:enableTimePicker="false" <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
week-start="0" <div class="col-xs-6 col-sm-6 col-md-6">
> <datepicker
<template #year="{ year }">{{ year + 543 }}</template> v-model="formDataSalary.date"
<template #year-overlay-value="{ value }">{{ :locale="'th'"
parseInt(value + 543) autoApply
}}</template> :enableTimePicker="false"
<template #trigger> week-start="0"
<q-input >
outlined <template #year="{ year }">{{ year + 543 }}</template>
dense <template #year-overlay-value="{ value }">{{
borderless parseInt(value + 543)
:model-value="date2Thai(formDataSalary.date)" }}</template>
:rules="[ <template #trigger>
<q-input
outlined
dense
borderless
:model-value="date2Thai(formDataSalary.date)"
:rules="[
(val: string) => (val: string) =>
!!val || !!val ||
`${'กรุณาเลือก วัน/เดือน/ปี'}`, `${'กรุณาเลือก วัน/เดือน/ปี'}`,
]" ]"
:label="`${'วัน/เดือน/ปี'}`" :label="`${'วัน/เดือน/ปี'}`"
hide-bottom-space hide-bottom-space
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
color="primary" color="primary"
class="cursor-pointer" class="cursor-pointer"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-6">
<q-input <q-input
ref="posNoRef" ref="posNoRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.posNo" v-model="formDataSalary.posNo"
hide-bottom-space hide-bottom-space
:label="`${'เลขที่ตำแหน่ง'}`" :label="`${'เลขที่ตำแหน่ง'}`"
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]" :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
> >
</q-input> </q-input>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-select <q-select
ref="templatePosRef" ref="templatePosRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
clearable clearable
v-model="formDataSalary.templatePos" v-model="formDataSalary.templatePos"
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`" :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
option-label="name" option-label="name"
:options="posNoOptions" :options="posNoOptions"
option-value="name" option-value="name"
hide-bottom-space hide-bottom-space
emit-value emit-value
use-input use-input
input-debounce="0" input-debounce="0"
@update:modelValue="updatePos" @update:modelValue="updatePos"
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos' doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
)" )"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
ref="positionRef" ref="positionRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.position" v-model="formDataSalary.position"
:label="`${'ตำแหน่ง'}`" :label="`${'ตำแหน่ง'}`"
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
outlined outlined
dense dense
lazy-rules lazy-rules
v-model="formDataSalary.positionLine" v-model="formDataSalary.positionLine"
hide-bottom-space hide-bottom-space
:label="`${'สายงาน'}`" :label="`${'สายงาน'}`"
/> />
<!-- <q-select <!-- <q-select
outlined outlined
dense dense
lazy-rules lazy-rules
@ -669,187 +668,201 @@ onMounted(() => {
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine' doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
)" )"
/> --> /> -->
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
outlined outlined
dense dense
lazy-rules lazy-rules
v-model="formDataSalary.positionPathSide" v-model="formDataSalary.positionPathSide"
hide-bottom-space hide-bottom-space
:label="`${'ด้าน/สาขา'}`" :label="`${'ด้าน/สาขา'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.positionExecutive" v-model="formDataSalary.positionExecutive"
hide-bottom-space hide-bottom-space
:label="`${'ตำแหน่งทางการบริหาร'}`" :label="`${'ตำแหน่งทางการบริหาร'}`"
> >
</q-input> </q-input>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-select <q-select
ref="positionType Ref" ref="positionType Ref"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.positionType" v-model="formDataSalary.positionType"
:label="`${'ตำแหน่งประเภท'}`" :label="`${'ตำแหน่งประเภท'}`"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="posTypeOptions" :options="posTypeOptions"
option-value="name" option-value="name"
hide-bottom-space hide-bottom-space
use-input use-input
input-debounce="0" input-debounce="0"
@update:model-value="updateSelectType" @update:model-value="updateSelectType"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]" :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType' doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
)" )"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-select <q-select
ref="positionLevel Ref" ref="positionLevel Ref"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.positionLevel" v-model="formDataSalary.positionLevel"
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]" :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
:label="`${'ระดับตำแหน่ง'}`" :label="`${'ระดับตำแหน่ง'}`"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="posLevelOption" :options="posLevelOption"
option-value="name" option-value="name"
hide-bottom-space hide-bottom-space
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel' doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
)" )"
/> />
</div> </div>
<div class="col-md-4"></div> <div class="col-md-4"></div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
ref="salaryRef" ref="salaryRef"
dense dense
outlined outlined
v-model="formDataSalary.salary" v-model="formDataSalary.salary"
label="เงินเดือน" label="เงินเดือน"
mask="###,###,###,###" mask="###,###,###,###"
reverse-fill-mask reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-4"> <div class="col-xs-6 col-sm-6 col-md-4">
<q-input <q-input
ref="amountRef" ref="amountRef"
dense dense
outlined outlined
v-model="formDataSalary.salaryPos" v-model="formDataSalary.salaryPos"
:rules="[(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]" :rules="[
label="เงินประจำตำแหน่ง" (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
mask="###,###,###,###" ]"
reverse-fill-mask label="เงินประจำตำแหน่ง"
lazy-rules mask="###,###,###,###"
hide-bottom-space reverse-fill-mask
/> lazy-rules
</div> hide-bottom-space
<div class="col-xs-6 col-sm-6 col-md-4"> />
<q-input </div>
ref="amountRef" <div class="col-xs-6 col-sm-6 col-md-4">
dense <q-input
outlined ref="amountRef"
v-model="formDataSalary.salaryCompensation" dense
label="เงินค่าตอบแทนรายเดือน" outlined
mask="###,###,###,###" v-model="formDataSalary.salaryCompensation"
reverse-fill-mask label="เงินค่าตอบแทนรายเดือน"
lazy-rules mask="###,###,###,###"
hide-bottom-space reverse-fill-mask
/> lazy-rules
</div> hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-12"> <div class="col-xs-6 col-sm-6 col-md-12">
<q-input <q-input
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.refCommandNo" v-model="formDataSalary.refCommandNo"
hide-bottom-space hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" :label="`${'เลขที่คำสั่ง'}`"
mask="#####################" mask="#####################"
> >
<!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" --> <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
</q-input> </q-input>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-select <q-select
ref="templateDocRef" ref="templateDocRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
clearable clearable
v-model="formDataSalary.templateDoc" v-model="formDataSalary.templateDoc"
:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`" :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
option-label="name" option-label="name"
:options="docOption" :options="docOption"
option-value="name" option-value="name"
emit-value emit-value
hide-bottom-space hide-bottom-space
use-input use-input
input-debounce="0" input-debounce="0"
@update:modelValue="updateDoc" @update:modelValue="updateDoc"
@filter="(inputValue: any, @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'doc' doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
)" )"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
ref="docRef" ref="docRef"
outlined outlined
dense dense
lazy-rules lazy-rules
borderless borderless
v-model="formDataSalary.doc" v-model="formDataSalary.doc"
:label="`${'เอกสารอ้างอิง'}`" :label="`${'เอกสารอ้างอิง'}`"
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]" :rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
/> />
</div> </div>
</q-card> </q-card>
</div> </div>
</q-card-section> </q-page>
</q-page-container>
<q-separator /> <q-separator />
<q-card-section align="right"> <q-footer>
<q-btn label="บันทึก" type="submit" color="secondary"> <q-separator color="grey-4" />
<q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn <q-toolbar class="fit row wrap justify-end items-start content-start">
> <q-btn
</q-card-section> dense
unelevated
label="บันทึก"
id="onSubmit"
type="submit"
color="public"
class="q-px-md"
>
<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:salaryId="salaryId" /> <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />

160
src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
View file

@ -247,83 +247,95 @@ watch(
); );
</script> </script>
<template> <template>
<q-dialog v-model="modal" persistent full-width> <q-dialog v-model="modal" persistent>
<q-card> <q-layout
<DialogHeader view="lHh lpr lFf"
:tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'" container
:close="closeDialog" style="height: 80vh; min-width: 80%"
/> class="bg-white"
<q-separator /> >
<q-card-section class="q-pa-sm"> <q-header>
<q-toolbar style="padding: 0px" class="text-primary"> <q-toolbar>
<q-space /> <DialogHeader
<q-input :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
dense :close="closeDialog"
outlined
v-model="keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon v-if="keyword === ''" name="search" />
<q-icon
v-else
name="clear"
class="cursor-pointer"
@click="keyword = ''"
/>
</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"
/> />
</q-toolbar> </q-toolbar>
<q-separator color="grey-4" />
</q-header>
<d-table <q-page-container>
ref="table" <q-page class="q-pa-md">
row-key="id" <q-toolbar style="padding: 0px" class="text-primary">
flat <q-space />
bordered <q-input
dense dense
:filter="keyword" outlined
:columns="columns" v-model="keyword"
:rows="rows" label="ค้นหา"
:paging="true" class="q-mr-sm"
v-model:pagination="pagination" >
:rows-per-page-options="[10, 20, 50, 100]" <template v-slot:append>
:visible-columns="visibleColumns" <q-icon v-if="keyword === ''" name="search" />
> <q-icon
<template v-slot:header="props"> v-else
<q-tr :props="props"> name="clear"
<q-th v-for="col in props.cols" :key="col.name" :props="props"> class="cursor-pointer"
<span class="text-weight-medium">{{ col.label }}</span> @click="keyword = ''"
</q-th> />
</q-tr> </template>
</template> </q-input>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-select
<q-td v-for="col in props.cols"> v-model="visibleColumns"
<div class="table_ellipsis"> multiple
{{ col.value ? col.value : "-" }} outlined
</div> dense
</q-td> options-dense
</q-tr> :display-value="$q.lang.table.columns"
</template> emit-value
</d-table> map-options
</q-card-section> :options="columns"
</q-card> option-value="name"
options-cover
style="min-width: 150px"
/>
</q-toolbar>
<d-table
ref="table"
row-key="id"
flat
bordered
dense
:filter="keyword"
:columns="columns"
:rows="rows"
:paging="true"
v-model:pagination="pagination"
:rows-per-page-options="[10, 20, 50, 100]"
:visible-columns="visibleColumns"
>
<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">
<div class="table_ellipsis">
{{ 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>

332
src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
View file

@ -115,8 +115,8 @@ const formFilter = reactive({
}); });
const maxPage = ref<number>(1); const maxPage = ref<number>(1);
const pagination = ref({ const pagination = ref({
page: formFilter.page, page: 1,
rowsPerPage: formFilter.pageSize, rowsPerPage: 10,
}); });
function onSubmit() { function onSubmit() {
@ -128,14 +128,13 @@ function onSubmit() {
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) { function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
isStatusEdit.value = StatusEdit; isStatusEdit.value = StatusEdit;
modalDialog.value = true;
id.value = StatusEdit ? data.id : ""; id.value = StatusEdit ? data.id : "";
formData.date = StatusEdit ? data.date : null; formData.date = StatusEdit ? data.date : null;
formData.reference = StatusEdit ? data.reference : ""; formData.reference = StatusEdit ? data.reference : "";
formData.detail = StatusEdit ? data.detail : ""; formData.detail = StatusEdit ? data.detail : "";
formData.refCommandNo = StatusEdit ? data.refCommandNo : ""; formData.refCommandNo = StatusEdit ? data.refCommandNo : "";
formData.refCommandDate = StatusEdit ? data.refCommandDate : null; formData.refCommandDate = StatusEdit ? data.refCommandDate : null;
modalDialog.value = true;
} }
function onClickCloseDialog() { function onClickCloseDialog() {
@ -414,171 +413,188 @@ onMounted(() => {
</q-card> </q-card>
</div> </div>
</template> </template>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table> </d-table>
<q-dialog v-model="modalDialog" persistent> <q-dialog v-model="modalDialog" persistent>
<q-card style="width: 600px"> <q-layout
view="lHh lpr lFf"
container
style="height: 80vh; min-width: 80%"
class="bg-white"
>
<q-form @submit.prevent greedy @validation-success="onSubmit"> <q-form @submit.prevent greedy @validation-success="onSubmit">
<DialogHeader <q-header>
tittle="บันทึกวันที่ไม่ได้รับเงินเดือนฯ" <q-toolbar>
:close="onClickCloseDialog" <DialogHeader
/> :tittle="
<q-separator /> isStatusEdit
<q-card-section class="q-pa-sm bg-grey-1"> ? 'แก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
<div class="row col-12 q-col-gutter-sm"> : 'เพิ่มบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
<div class="col-xs-12 col-sm-12"> "
<q-card flat bordered class="fit q-pa-sm"> :close="onClickCloseDialog"
<div class="row col-12 q-col-gutter-xs"> />
<div class="col-xs-6 col-sm-6 col-md-6"> </q-toolbar>
<datepicker <q-separator color="grey-4" />
menu-class-name="modalfix" </q-header>
v-model="formData.date"
:locale="'th'" <q-page-container>
autoApply <q-page class="q-pa-md">
:enableTimePicker="false" <div class="row col-12 q-col-gutter-sm">
week-start="0" <div class="col-xs-12 col-sm-12">
> <q-card flat bordered class="fit q-pa-sm">
<template #year="{ year }">{{ year + 543 }}</template> <div class="row col-12 q-col-gutter-xs">
<template #year-overlay-value="{ value }">{{ <div class="col-xs-6 col-sm-6 col-md-6">
parseInt(value + 543) <datepicker
}}</template> menu-class-name="modalfix"
<template #trigger> v-model="formData.date"
<q-input :locale="'th'"
ref="dateRef" autoApply
outlined :enableTimePicker="false"
dense week-start="0"
borderless >
class="inputgreen" <template #year="{ year }">{{ year + 543 }}</template>
:model-value="date2Thai(formData.date)" <template #year-overlay-value="{ value }">{{
:rules="[ parseInt(value + 543)
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`, }}</template>
]" <template #trigger>
hide-bottom-space <q-input
:label="`${'วัน/เดือน/ปี'}`" ref="dateRef"
> outlined
<template v-slot:prepend> dense
<q-icon borderless
name="event" class="inputgreen"
class="cursor-pointer" :model-value="date2Thai(formData.date)"
style="color: var(--q-primary)" :rules="[
> (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
</q-icon> ]"
</template> hide-bottom-space
</q-input> :label="`${'วัน/เดือน/ปี'}`"
</template> >
</datepicker> <template v-slot:prepend>
</div> <q-icon
<div class="col-6"> name="event"
<q-input class="cursor-pointer"
ref="referenceRef" style="color: var(--q-primary)"
outlined >
dense </q-icon>
autogrow </template>
lazy-rules </q-input>
borderless </template>
v-model="formData.reference" </datepicker>
class="inputgreen" </div>
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]" <div class="col-6">
hide-bottom-space <q-input
:label="`${'เอกสารอ้างอิง'}`" ref="referenceRef"
/> outlined
</div> dense
<div class="col-12"> autogrow
<q-input lazy-rules
ref="detailRef" borderless
outlined v-model="formData.reference"
dense class="inputgreen"
autogrow :rules="[
lazy-rules (val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
borderless ]"
v-model="formData.detail" hide-bottom-space
class="inputgreen" :label="`${'เอกสารอ้างอิง'}`"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]" />
hide-bottom-space </div>
:label="`${'รายละเอียด'}`" <div class="col-12">
/> <q-input
</div> ref="detailRef"
<div class="col-xs-6 col-sm-6 col-md-6"> outlined
<q-input dense
outlined autogrow
dense lazy-rules
lazy-rules borderless
borderless v-model="formData.detail"
v-model="formData.refCommandNo" class="inputgreen"
class="inputgreen" :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" :label="`${'รายละเอียด'}`"
> />
<template v-slot:append> </div>
<q-icon name="mdi-file" class="cursor-pointer" /> <div class="col-xs-6 col-sm-6 col-md-6">
</template> <q-input
</q-input> outlined
</div> dense
<div class="col-xs-6 col-sm-6 col-md-6"> lazy-rules
<datepicker borderless
menu-class-name="modalfix" v-model="formData.refCommandNo"
v-model="formData.refCommandDate" class="inputgreen"
:locale="'th'" hide-bottom-space
autoApply :label="`${'เลขที่คำสั่ง'}`"
:enableTimePicker="false" >
week-start="0" <template v-slot:append>
> <q-icon name="mdi-file" class="cursor-pointer" />
<template #year="{ year }">{{ year + 543 }}</template> </template>
<template #year-overlay-value="{ value }">{{ </q-input>
parseInt(value + 543) </div>
}}</template> <div class="col-xs-6 col-sm-6 col-md-6">
<template #trigger> <datepicker
<q-input menu-class-name="modalfix"
clearable v-model="formData.refCommandDate"
outlined :locale="'th'"
dense autoApply
borderless :enableTimePicker="false"
class="inputgreen" week-start="0"
:model-value=" >
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
clearable
outlined
dense
borderless
class="inputgreen"
:model-value="
formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date) formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
" "
hide-bottom-space hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`" :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
@clear="formData.refCommandDate = null" @clear="formData.refCommandDate = null"
> >
<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> </div>
</div> </q-card>
</q-card> </div>
</div> </div>
</div> </q-page>
</q-card-section> </q-page-container>
<q-separator /> <q-separator />
<q-card-section align="right"> <q-footer>
<q-btn label="บันทึก" type="submit" color="secondary"> <q-separator color="grey-4" />
<q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn <q-toolbar class="fit row wrap justify-end items-start content-start">
> <q-btn
</q-card-section> dense
unelevated
label="บันทึก"
id="onSubmit"
type="submit"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-toolbar>
</q-footer>
</q-form> </q-form>
</q-card> </q-layout>
</q-dialog> </q-dialog>
<DialogHisotory v-model:modal="modalHistory" v-model:id="id" /> <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />

158
src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
View file

@ -144,87 +144,87 @@ watch(modal, (status) => {
</script> </script>
<template> <template>
<q-dialog v-model="modal" persistent full-width> <q-dialog v-model="modal" persistent full-width>
<q-card> <q-layout
<DialogHeader view="lHh lpr lFf"
:tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'" container
:close="closeDialog" style="height: 80vh; min-width: 80%"
/> class="bg-white"
<q-separator /> >
<q-card-section class="q-pa-sm"> <q-header>
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm"> <q-toolbar>
<q-space /> <DialogHeader
<q-input :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
dense :close="closeDialog"
outlined
v-model="filter"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</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"
/> />
</q-toolbar> </q-toolbar>
<d-table <q-separator color="grey-4" />
ref="table" </q-header>
row-key="id"
flat <q-page-container>
bordered <q-page class="q-pa-md">
dense <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
:filter="filter" <q-space />
:columns="columns" <q-input
:rows="rows" dense
:paging="true" outlined
v-model:pagination="pagination" v-model="filter"
:rows-per-page-options="[20, 50, 100]" label="ค้นหา"
:visible-columns="visibleColumns" class="q-mr-sm"
> >
<template v-slot:header="props"> <template v-slot:append>
<q-tr :props="props"> <q-icon name="search" />
<q-th v-for="col in props.cols" :key="col.name" :props="props"> </template>
<span class="text-weight-medium">{{ col.label }}</span> </q-input>
</q-th>
</q-tr> <q-select
</template> v-model="visibleColumns"
<template v-slot:body="props"> multiple
<q-tr :props="props" class="cursor-pointer"> outlined
<q-td v-for="col in props.cols" :key="col.name" :props="props"> dense
<div class="table_ellipsis"> options-dense
{{ col.value ? col.value : "-" }} :display-value="$q.lang.table.columns"
</div> emit-value
</q-td> map-options
</q-tr> :options="columns"
</template> option-value="name"
<!-- <template v-slot:pagination="scope"> options-cover
<q-pagination style="min-width: 150px"
v-model="formFilter.page" />
active-color="primary" </q-toolbar>
color="dark" <d-table
:max="Number(maxPage)" ref="table"
:max-pages="5" row-key="id"
size="sm" flat
boundary-links bordered
direction-links dense
></q-pagination> :filter="filter"
</template> --> :columns="columns"
</d-table> :rows="rows"
</q-card-section> :paging="true"
</q-card> v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
:visible-columns="visibleColumns"
>
<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.name" :props="props">
<div class="table_ellipsis">
{{ 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>

2
src/modules/04_registryNew/interface/index/government.ts
View file

@ -32,6 +32,8 @@ interface MyObjectRef {
} }
interface RequestItemsHistoryObject { interface RequestItemsHistoryObject {
lastUpdatedAt: Date,
lastUpdateFullName: string,
oc: string | null; oc: string | null;
position: string | null; position: string | null;
positionPathSide: string | null; positionPathSide: string | null;

2
src/modules/04_registryNew/interface/index/performSpecialWork.ts
View file

@ -32,6 +32,8 @@ interface MyObjectRef {
} }
interface ResponseObject { interface ResponseObject {
lastUpdateFullName: string,
lastUpdatedAt: Date,
id: string; id: string;
dateStart: Date; dateStart: Date;
dateEnd: Date; dateEnd: Date;