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:
setthawutttty 2024-03-13 16:52:05 +07:00
commit f870c08405
22 changed files with 3754 additions and 1205 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/api/13_salary/api.salary.ts
View file

@ -29,5 +29,16 @@ export default {
salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
salaryPeriodProfile: `${salary}/period/org/profile`,
salaryProperty:(id:string)=> `${salaryPeriod}/org/property/${id}`,
salaryProperty: (id: string) => `${salaryPeriod}/org/property/${id}`,
/** รายการเงินเดือนลูกจ้างประจำ*/
salaryEmployeeChart: `${salary}/employee`,
salaryEmployeeChartByid: (id: string) => `${salary}/employee/${id}`,
salaryEmployeeChartCopy: `${salary}/employee/copy`,
salaryEmployeeChartFile: (id: string) => `${salary}/file/employee/${id}`,
salaryEmployeeChartDelFile: (id: string, fileName: string) =>
`${salary}/file/employee/${id}/${fileName}`,
salaryEmployeeRateList: `${salaryRate}/employee`,
salaryEmployeeRateListByid: (id: string) => `${salaryRate}/employee/${id}`,
};

70
src/modules/02_organizationalNew/components/DialogFormAgency.vue
View file

@ -61,6 +61,8 @@ const orgLevelOptionMain = ref<DataOption[]>([
{ name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
]);
const orgLevelSubOptionMain = ref<DataOption[]>([]);
const orgLevelOption = ref<DataOption[]>([]);
const orgNameRef = ref<Object | null>(null);
@ -70,6 +72,7 @@ const orgCodeRef = ref<Object | null>(null);
// const orgPhoneInRef = ref<Object | null>(null);
// const orgFaxRef = ref<Object | null>(null);
const orgLevelRef = ref<Object | null>(null);
const orgLevelSubRef = ref<Object | null>(null);
const formData = reactive<FormDataAgency>({
orgName: "",
@ -79,6 +82,7 @@ const formData = reactive<FormDataAgency>({
orgPhoneIn: "",
orgFax: "",
orgLevel: "",
orgLevelSub: "",
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@ -90,6 +94,7 @@ const objectComplaintsRef: FormAgencyRef = {
// orgPhoneIn: orgPhoneInRef,
// orgFax: orgFaxRef,
orgLevel: orgLevelRef,
orgLevelSub: orgLevelSubRef,
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@ -141,8 +146,12 @@ function onSubmit() {
["org" + type + "PhoneIn"]: formData.orgPhoneIn,
["org" + type + "Fax"]: formData.orgFax,
["org" + type + "Rank"]: formData.orgLevel,
["org" + type + "RankSub"]:
level.value !== 0 ? formData.orgLevelSub : undefined,
[nameId]: rootId,
};
console.log(body);
if (actionType.value === "ADD") {
await http
.post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
@ -229,6 +238,7 @@ watch(
props.dataNode.orgTreeRank === "DEPARTMENT"
? orgLevelOptionMain.value
: orgLevelOptionMain.value.slice(1, 4);
selectOrgLevele(formData.orgLevel);
}
}
}
@ -245,6 +255,45 @@ const tittleName = computed(() => {
return name;
});
function selectOrgLevele(val: string) {
formData.orgLevelSub = "";
switch (val) {
case "OFFICE":
orgLevelSubOptionMain.value = [
{ name: "ระดับกอง", id: "DIVISION" },
{
name: "สำนักงาน",
id: "OFFICE",
},
{ name: "ส่วนราชการ", id: "GOVERNMENT" },
{ name: "โรงพยาบาล", id: "HOSPITAL" },
{ name: "เทียบเท่ากอง", id: "EQUIVALENT" },
];
break;
case "DIVISION":
orgLevelSubOptionMain.value = [
{ name: "ระดับส่วน", id: "SECTION" },
{
name: "กลุ่มภารกิจ",
id: "MISSION",
},
];
case "SECTION":
orgLevelSubOptionMain.value = [
{ name: "ระดับฝ่าย", id: "FACTION" },
{
name: "กลุ่มงาน",
id: "WORK",
},
];
default:
break;
}
}
</script>
<template>
@ -323,6 +372,7 @@ const tittleName = computed(() => {
emit-value
map-options
v-model="formData.orgLevel"
@update:model-value="selectOrgLevele"
:options="orgLevelOption"
:label="
level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
@ -339,6 +389,26 @@ const tittleName = computed(() => {
lazy-rules
/>
</div>
<div class="col-4" v-if="formData.orgLevel !== '' && level !== 0">
<q-select
:readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
ref="orgLevelSubRef"
dense
hide-bottom-space
outlined
option-label="name"
option-value="id"
emit-value
map-options
v-model="formData.orgLevelSub"
:options="orgLevelSubOptionMain"
label="ระดับของส่วนราชการ(ซับ)"
:rules="[
(val) => !!val || 'กรุณาเลือกระดับของส่วนราชการ (ซับ)',
]"
lazy-rules
/>
</div>
<div class="col-4">
<q-input
v-model="formData.orgPhoneEx"

3
src/modules/02_organizationalNew/interface/index/Main.ts
View file

@ -22,6 +22,7 @@ interface FormDataAgency {
orgPhoneIn: string;
orgFax: string;
orgLevel: string;
orgLevelSub: string;
}
interface FormDataPosition {
@ -125,8 +126,6 @@ interface NewPagination {
sortBy: string;
}
export type {
Pagination,
DataOption,

553
src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
View file

@ -1,6 +1,555 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import moment from "moment";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar";
import type { ProfesLicenseObject } from "@/modules/04_registryNew/interface/index/profesLicense";
const mixin = useCounterMixin();
const $q = useQuasar();
const { dialogConfirm, date2Thai } = mixin;
const historyDialog = ref<boolean>(false);
const addDataDialog = ref<boolean>(false);
const mode = ref<string>("table");
const columns = ref<QTableProps["columns"]>([
{
name: "certificateType",
align: "left",
label: "ชื่อใบอนุญาต",
sortable: true,
field: "certificateType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "issuer",
align: "left",
label: "หน่วยงานผู้ออกใบอนุญาต",
sortable: true,
field: "issuer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "certificateNo",
align: "left",
label: "เลขที่ใบอนุญาต",
sortable: true,
field: "certificateNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "issueDate",
align: "left",
label: "วันที่ออกใบอนุญาต",
sortable: true,
field: "issueDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "expireDate",
align: "left",
label: "วันที่หมดอายุ",
sortable: true,
field: "expireDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const profesLicenseData = reactive<ProfesLicenseObject>({
certificateType: "",
issuer: "",
certificateNo: "",
issueDate: new Date(),
expireDate: new Date(),
});
const formFilter = reactive({
page: 1,
pageSize: 10,
keyword: "",
});
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
const row = [
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานเชียงใหม่",
certificateNo: "12",
issueDate: new Date(),
expireDate: new Date(),
},
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานพะเยา",
certificateNo: "136",
issueDate: new Date(),
expireDate: new Date(),
},
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานโคราช",
certificateNo: "12",
issueDate: new Date(),
expireDate: new Date(),
},
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานกทม",
certificateNo: "11",
issueDate: new Date(),
expireDate: new Date(),
},
];
const visibleColumns = ref<string[]>([
"certificateType",
"issuer",
"certificateNo",
"issueDate",
"expireDate",
]);
function validateForm() {
onSubmit();
}
async function onSubmit() {
dialogConfirm(
$q,
async () => {
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
function closeDialog() {
addDataDialog.value = false;
}
function closeHistoryDialog() {
historyDialog.value = false;
}
</script>
<template>
<div>ใบอนุญาตประกอบวิชาชีพ</div>
<div class="toptitle col text-dark">ใบอนุญาตประกอบวิชาชีพ</div>
<q-toolbar style="padding: 0px">
<q-btn
round
flat
color="primary"
icon="add"
size="16px"
@click="addDataDialog = true"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
>
<q-space />
<q-select
v-if="mode === 'table'"
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"
class="q-mr-sm"
/>
<q-btn-toggle
v-model="mode"
dense
class="no-shadow toggle-borderd"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' },
]"
>
<template v-slot:table>
<q-icon
name="format_list_bulleted"
size="24px"
:style="{
color: mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
size="24px"
:style="{
color: mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</q-toolbar>
<d-table
:grid="mode === 'card'"
ref="table"
:columns="columns"
:rows="row"
row-key="name"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
: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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props" v-if="mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.id"
@click="addDataDialog = true"
>
<div v-if="col.name === 'issueDate' || col.name === 'expireDate'">
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="() => (historyDialog = true)"
>
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:item="props" v-else>
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
>
<q-card bordered>
<q-card-actions align="right">
<q-btn
flat
round
color="primary"
icon="edit"
@click="addDataDialog = true"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
flat
round
color="blue"
icon="history"
@click="historyDialog = true"
>
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
</q-btn>
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
v-if="col.name === 'issueDate' || col.name === 'expireDate'"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
<q-dialog v-model="addDataDialog" class="dialog" persistent>
<q-card style="min-width: 40%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header
tittle="เพิ่มใบอนุญาตประกอบวิชาชีพ"
:close="closeDialog"
/>
</q-card-section>
<q-separator color="grey-4" />
<q-card-section class="row q-gutter-sm q-pb-sm">
<div class="col">
<q-input
outlined
v-model="profesLicenseData.certificateType"
label="ชื่อใบอนุญาต"
bg-color="white"
dense
:rules="[(val) => !!val || `${'กรุณากรอกชื่นใบอนุญาต'}`]"
hide-bottom-space
/>
</div>
<div class="col">
<q-input
outlined
v-model="profesLicenseData.certificateType"
label="หน่วยงานผู้ออกใบอนุญาต"
bg-color="white"
dense
:rules="[
(val) => !!val || `${'กรุณากรอกชื่อหน่วยงานผู้ออกใบอนุญาต'}`,
]"
hide-bottom-space
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-py-none">
<div class="col">
<q-input
outlined
v-model="profesLicenseData.certificateType"
label="เลขที่ใบอนุญาต"
bg-color="white"
dense
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
hide-bottom-space
/>
</div>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="profesLicenseData.issueDate"
:locale="'th'"
autoApply
class="col"
:enableTimePicker="false"
@update:modelValue="profesLicenseData.issueDate"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
bg-color="white"
hide-bottom-space
:model-value="
profesLicenseData.issueDate
? date2Thai(profesLicenseData.issueDate)
: ''
"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
]"
:label="`${'วัน/เดือน/ปี ที่ออกใบอนุญาต'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</q-card-section>
<q-card-section class="row q-pt-sm q-gutter-sm">
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="profesLicenseData.expireDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="profesLicenseData.expireDate"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
bg-color="white"
hide-bottom-space
:model-value="
profesLicenseData.expireDate
? date2Thai(profesLicenseData.expireDate)
: ''
"
:label="`${'วัน/เดือน/ปี ที่หมดอายุ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col"></div>
</q-card-section>
<q-card-actions align="right">
<q-btn
id="onSubmit"
type="submit"
dense
unelevated
label="บันทึก"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-card style="min-width: 70%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header
tittle="ประวัติแก้ไขประวัติการศึกษา"
:close="closeHistoryDialog"
/>
</q-card-section>
<q-separator color="grey-4" />
<q-card-section>
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
<q-space />
<q-input
dense
outlined
bg-color="white"
v-model="formFilter.keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
bg-color="white"
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>
<d-table
ref="table"
:columns="columns"
:rows="row"
row-key="name"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
: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-th auto-width />
</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 === 'issueDate' || col.name === 'expireDate'"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>

931
src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
View file

@ -1,6 +1,931 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import moment from "moment";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar";
const mixin = useCounterMixin();
const $q = useQuasar();
const { dialogConfirm, date2Thai } = mixin;
const addDataDialog = ref<boolean>(false);
const mode = ref<string>("table");
const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "topic",
align: "left",
label: "หัวข้อการฝึกอบรม/ดูงาน",
sortable: true,
field: "topic",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
align: "left",
label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
sortable: true,
field: "startDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
align: "left",
label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
sortable: true,
field: "endDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "yearly",
align: "left",
label: "ปีที่อบรม (พ.ศ.)",
sortable: true,
field: "yearly",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "place",
align: "left",
label: "สถานที่ฝึกอบรม/ดูงาน",
sortable: true,
field: "place",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "duration",
align: "left",
label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
sortable: true,
field: "duration",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "department",
align: "left",
label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
sortable: true,
field: "department",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "numberOrder",
align: "left",
label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
sortable: true,
field: "numberOrder",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateOrder",
align: "left",
label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
sortable: true,
field: "dateOrder",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const isDate = ref<string>("false");
const educationOption = ["ใช่", "ไม่ใช่"];
const historyDialog = ref<boolean>(false);
const educationData = reactive({
level: "",
institute: "",
startYear: new Date().getFullYear(),
finishYear: new Date().getFullYear(),
graduateDate: new Date(),
startDate: new Date(),
endDate: new Date(),
isEducation: "",
degree: "",
field: "",
fundName: "",
gpa: null,
country: "",
other: "",
duration: "",
durationYear: "",
note: "",
});
const trainData = reactive({
name: "",
topic: "",
yearly: new Date().getFullYear(),
place: "",
duration: "",
department: "",
numberOrder: "",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
startYear: new Date().getFullYear(),
finishYear: new Date().getFullYear(),
});
const formFilter = reactive({
page: 1,
pageSize: 10,
keyword: "",
});
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
const row = [
{
name: "ชื่อโครงการ",
topic: "ชื่อหัวข้อ",
yearly: "2567",
place: "สถานที่",
duration: "2567",
department: "แผนกสาขา",
numberOrder: "1244",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
},
{
name: "ชื่อโครงการ",
topic: "ชื่อหัวข้อ",
yearly: "2567",
place: "สถานที่",
duration: "2567",
department: "แผนกสาขา",
numberOrder: "1244",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
},
{
name: "ชื่อโครงการ",
topic: "ชื่อหัวข้อ",
yearly: "2567",
place: "สถานที่",
duration: "2567",
department: "แผนกสาขา",
numberOrder: "1244",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
},
{
name: "ชื่อโครงการ",
topic: "ชื่อหัวข้อ",
yearly: "2567",
place: "สถานที่",
duration: "2567",
department: "แผนกสาขา",
numberOrder: "1244",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
},
{
name: "ชื่อโครงการ",
topic: "ชื่อหัวข้อ",
yearly: "2567",
place: "สถานที่",
duration: "2567",
department: "แผนกสาขา",
numberOrder: "1244",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
},
{
name: "ชื่อโครงการ",
topic: "ชื่อหัวข้อ",
yearly: "2567",
place: "สถานที่",
duration: "2567",
department: "แผนกสาขา",
numberOrder: "1244",
dateOrder: new Date(),
startDate: new Date(),
endDate: new Date(),
},
];
const visibleColumns = ref<string[]>([
"name",
"topic",
"yearly",
"place",
"duration",
"department",
"numberOrder",
"dateOrder",
"startDate",
"endDate",
]);
function validateForm() {
onSubmit();
}
async function onSubmit() {
dialogConfirm(
$q,
async () => {
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
function closeDialog() {
addDataDialog.value = false;
}
function closeHistoryDialog() {
historyDialog.value = false;
}
watch(
() => isDate.value,
() => {
if (isDate.value === "true") {
trainData.startDate = new Date(`${trainData.startYear}`);
trainData.endDate = new Date(`${trainData.finishYear}`);
} else {
trainData.startYear = parseInt(
moment(trainData.startDate).format("YYYY")
);
trainData.finishYear = parseInt(moment(trainData.endDate).format("YYYY"));
}
}
);
</script>
<template>
<div>การฝึกอบรม/ดูงาน</div>
<q-toolbar style="padding: 0px">
<q-btn
round
flat
color="primary"
icon="add"
size="16px"
@click="addDataDialog = true"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
>
<q-space />
<q-input
dense
outlined
v-model="formFilter.keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-if="mode === 'table'"
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"
class="q-mr-sm"
/>
<q-btn-toggle
v-model="mode"
dense
class="no-shadow toggle-borderd"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' },
]"
>
<template v-slot:table>
<q-icon
name="format_list_bulleted"
size="24px"
:style="{
color: mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
size="24px"
:style="{
color: mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</q-toolbar>
<d-table
:grid="mode === 'card'"
ref="table"
:columns="columns"
:rows="row"
row-key="name"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
: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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props" v-if="mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.id"
@click="addDataDialog = true"
>
<div
v-if="
col.name === 'startDate' ||
col.name === 'endDate' ||
col.name === 'dateOrder'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="() => (historyDialog = true)"
>
<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"
>
<q-card bordered>
<q-card-actions align="right">
<q-btn
flat
round
color="primary"
icon="edit"
@click="addDataDialog = true"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
flat
round
color="blue"
icon="history"
@click="historyDialog = true"
>
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
</q-btn>
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
v-if="
col.name === 'startDate' ||
col.name === 'endDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
<q-dialog v-model="addDataDialog" class="dialog" persistent>
<q-card style="min-width: 40%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
</q-card-section>
<q-separator color="grey-4" />
<div class="col">
<q-card-section class="row q-gutter-sm">
<div class="col">
<q-input
outlined
v-model="trainData.name"
label="ชื่อโครงการ/หลักสูตรการฝึกอบรม"
bg-color="white"
dense
:rules="[
(val) =>
!!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
]"
hide-bottom-space
/>
</div>
<div class="col">
<q-input
outlined
v-model="trainData.topic"
label="หัวข้อการฝึกอบรม/ดูงาน"
bg-color="white"
dense
:rules="[
(val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
/>
</div>
</q-card-section>
<q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
<q-radio
v-model="isDate"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="false"
label="ปี"
dense
/>
<q-radio
v-model="isDate"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="true"
label="วัน/เดือน/ปี"
dense
/>
</div>
<div v-if="isDate === 'false'" class="row q-gutter-sm">
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="trainData.startYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="trainData.startYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="trainData.startYear + 543"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
]"
:label="`${'ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="trainData.finishYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="trainData.finishYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="trainData.finishYear + 543"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
]"
:label="`${'ปี ที่จบการฝึกอบรม/ดูงาน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div v-if="isDate === 'true'" class="row q-gutter-sm">
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="trainData.startDate"
: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
outlined
dense
lazy-rules
:model-value="date2Thai(trainData.startDate)"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="trainData.endDate"
: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
outlined
dense
lazy-rules
:model-value="date2Thai(trainData.endDate)"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card>
<q-card-section class="row q-gutter-sm q-pt-sm q-py-none">
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="trainData.yearly"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="trainData.yearly"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="trainData.yearly + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col">
<q-input
outlined
v-model="trainData.place"
label="สถานที่ฝึกอบรม/ดูงาน"
bg-color="white"
dense
:rules="[
(val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<div class="col">
<q-input
outlined
v-model="trainData.duration"
label="รวมระยะเวลาในการฝึกอบรม/ดูงาน"
bg-color="white"
dense
/>
</div>
<div class="col">
<q-input
outlined
v-model="trainData.department"
label="หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน"
bg-color="white"
dense
mask="#.##"
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<div class="col">
<q-input
outlined
v-model="trainData.numberOrder"
label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
bg-color="white"
dense
/>
</div>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="trainData.dateOrder"
: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
outlined
dense
lazy-rules
:model-value="date2Thai(trainData.dateOrder)"
hide-bottom-space
:label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</q-card-section>
</div>
<q-card-actions align="right">
<q-btn
id="onSubmit"
type="submit"
dense
unelevated
label="บันทึก"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-card style="min-width: 70%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header
tittle="ประวัติแก้ไขประวัติการศึกษา"
:close="closeHistoryDialog"
/>
</q-card-section>
<q-separator color="grey-4" />
<q-card-section>
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
<q-space />
<q-input
dense
outlined
bg-color="white"
v-model="formFilter.keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
bg-color="white"
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>
<d-table
ref="table"
:columns="columns"
:rows="row"
row-key="name"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
: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-th auto-width />
</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 === 'startDate' ||
col.name === 'endDate' ||
col.name === 'dateOrder'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>
<style scoped>
.borderCard {
border: 1px solid #d0d0d0;
}
</style>

111
src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
View file

@ -10,14 +10,17 @@ import HistoryTable from "@/components/TableHistory.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
InformationOps,
Information,
DataOption,
} from "@/modules/04_registryNew/interface/index/Main";
import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
const informaData = ref<Information>(defaultInformation);
const modal = ref<boolean>(false);
const myForm = ref<any>();
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
@ -300,6 +303,26 @@ const visibleColumnsHistory = ref<String[]>([
"createdAt",
]);
async function fetchData() {
informaData.value.cardid = resultData.value.citizenId;
informaData.value.prefixId = resultData.value.prefixId;
informaData.value.prefix = resultData.value.prefix;
informaData.value.firstname = resultData.value.firstName;
informaData.value.lastname = resultData.value.lastName;
informaData.value.birthDate = resultData.value.birthDate;
informaData.value.age = resultData.value.age;
informaData.value.genderId = resultData.value.genderId;
informaData.value.bloodId = resultData.value.bloodGroupId;
informaData.value.nationality = resultData.value.nationality;
informaData.value.ethnicity = resultData.value.race;
informaData.value.statusId = resultData.value.relationshipId;
informaData.value.religionId = resultData.value.religionId;
informaData.value.tel = resultData.value.telephoneNumber;
informaData.value.employeeType = resultData.value.employeeType;
informaData.value.employeeClass = resultData.value.employeeClass;
informaData.value.profileType = resultData.value.profileType;
}
// get person detail list
async function fetchPerson() {
// showLoader();
@ -478,6 +501,7 @@ function onSubmit() {
onMounted(async () => {
await fetchPerson();
await fetchData();
});
</script>
<template>
@ -513,29 +537,35 @@ onMounted(async () => {
<!-- data -->
<div class="col-md-8 col-7">
<div class="q-py-xs">
{{ resultData.citizenId }}
{{ informaData.cardid }}
</div>
<div class="q-py-xs">
{{
`${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
`${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
}}
</div>
<div class="q-py-xs">
{{ date2Thai(resultData.birthDate) }}
{{ date2Thai(informaData.birthDate) }}
</div>
<div class="q-py-xs">
{{ resultData.age ? resultData.age : "-" }}
</div>
<div class="q-py-xs">
{{ resultData.gender ? resultData.gender : "-" }}
{{ informaData.age ? informaData.age : "-" }}
</div>
<div class="q-py-xs">
{{
resultData.relationshipId
informaData.genderId
? (
Ops.statusOps.find(
(r) => r.id === resultData.relationshipId
) || {}
Ops.genderOps.find((r) => r.id === informaData.genderId) ||
{}
).name
: "-"
}}
</div>
<div class="q-py-xs">
{{
informaData.statusId
? (
Ops.statusOps.find((r) => r.id === informaData.statusId) ||
{}
).name
: "-"
}}
@ -556,17 +586,17 @@ onMounted(async () => {
<!-- data -->
<div class="col-md-8 col-7">
<div class="q-py-xs">
{{ resultData.nationality ? resultData.nationality : "-" }}
{{ informaData.nationality ? informaData.nationality : "-" }}
</div>
<div class="q-py-xs">
{{ resultData.race ? resultData.race : "-" }}
{{ informaData.ethnicity ? informaData.ethnicity : "-" }}
</div>
<div class="q-py-xs">
{{
resultData.religionId
informaData.religionId
? (
Ops.religionOps.find(
(r) => r.id === resultData.religionId
(r) => r.id === informaData.religionId
) || {}
).name
: "-"
@ -574,17 +604,14 @@ onMounted(async () => {
</div>
<div class="q-py-xs">
{{
resultData.bloodGroupId
? (
Ops.bloodOps.find(
(b) => b.id === resultData.bloodGroupId
) || {}
).name
informaData.bloodId
? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
.name
: "-"
}}
</div>
<div class="q-py-xs">
{{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
{{ informaData.tel ? informaData.tel : "-" }}
</div>
</div>
</div>
@ -610,7 +637,7 @@ onMounted(async () => {
hide-bottom-space
maxlength="13"
mask="#############"
v-model="resultData.citizenId"
v-model="informaData.cardid"
:label="dataLabel.citizenId"
:rules="[
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
@ -621,7 +648,7 @@ onMounted(async () => {
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -632,7 +659,7 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.prefixId"
v-model="informaData.prefixId"
:options="Ops.prefixOps"
:label="dataLabel.prefix"
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
@ -647,7 +674,7 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="resultData.firstName"
v-model="informaData.firstname"
:label="dataLabel.firstName"
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
/>
@ -658,7 +685,7 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="resultData.lastName"
v-model="informaData.lastname"
:label="dataLabel.lastName"
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
/>
@ -669,7 +696,7 @@ onMounted(async () => {
borderless
week-start="0"
menu-class-name="modalfix"
v-model="resultData.birthDate"
v-model="informaData.birthDate"
:locale="'th'"
>
<template #year="{ year }">
@ -686,8 +713,8 @@ onMounted(async () => {
dense
hide-bottom-space
:model-value="
resultData.birthDate != null
? date2Thai(resultData.birthDate)
informaData.birthDate != null
? date2Thai(informaData.birthDate)
: null
"
:label="dataLabel.birthDate"
@ -714,12 +741,12 @@ onMounted(async () => {
lazy-rules
hide-bottom-space
readonly
v-model="resultData.age"
v-model="informaData.age"
:label="dataLabel.age"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -730,7 +757,7 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.genderId"
v-model="informaData.genderId"
:options="Ops.genderOps"
:label="dataLabel.gender"
@filter="(inputValue: any,
@ -739,7 +766,7 @@ onMounted(async () => {
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -750,7 +777,7 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.relationshipId"
v-model="informaData.statusId"
:options="Ops.statusOps"
:label="dataLabel.relationship"
@filter="(inputValue: any,
@ -764,7 +791,7 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="resultData.nationality"
v-model="informaData.nationality"
:label="dataLabel.nationality"
/>
</div>
@ -774,12 +801,12 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="resultData.race"
v-model="informaData.ethnicity"
:label="dataLabel.race"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -790,7 +817,7 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.religionId"
v-model="informaData.religionId"
:options="Ops.religionOps"
:label="dataLabel.religion"
@filter="(inputValue: any,
@ -799,7 +826,7 @@ onMounted(async () => {
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -810,7 +837,7 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.bloodGroupId"
v-model="informaData.bloodId"
:options="Ops.bloodOps"
:label="dataLabel.bloodGroup"
@filter="(inputValue: any,
@ -825,7 +852,7 @@ onMounted(async () => {
lazy-rules
hide-bottom-space
mask="##########"
v-model="resultData.telephoneNumber"
v-model="informaData.tel"
:label="dataLabel.telephoneNumber"
/>
</div>

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

@ -47,7 +47,7 @@ const resultData = ref({
currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
currentZipCode: "50100",
registrationSame: "1",
registrationSame: "0",
});
const dataLabel = {
@ -262,6 +262,20 @@ function defaultAdd() {
}
async function fetchData() {
// mock data
addressData.value.address = resultData.value.registrationAddress;
addressData.value.provinceId = resultData.value.registrationProvinceId;
addressData.value.districtId = resultData.value.registrationDistrictId;
addressData.value.subdistrictId = resultData.value.registrationSubDistrictId;
addressData.value.codep = resultData.value.registrationZipCode;
addressData.value.same = resultData.value.registrationSame;
addressData.value.addressC = resultData.value.currentAddress;
addressData.value.provinceIdC = resultData.value.currentProvinceId;
addressData.value.districtIdC = resultData.value.currentDistrictId;
addressData.value.subdistrictIdC = resultData.value.currentSubDistrictId;
addressData.value.codec = resultData.value.currentZipCode;
// if (route.params.id) {
// // showLoader();
// await http
@ -464,13 +478,57 @@ async function fetchSubDistrict(id: string | null, position: string) {
} else isLoad.value++;
}
async function selectProvince(e: string | null, name: string) {
if (e != null) {
if (name == "1") {
addressData.value.districtId = "";
addressData.value.subdistrictId = "";
addressData.value.codep = "";
} else {
addressData.value.districtIdC = "";
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
}
myForm.value.resetValidation();
await fetchDistrict(e, name);
}
};
async function selectDistrict(e: string | null, name: string) {
if (e != null) {
if (name == "1") {
addressData.value.subdistrictId = "";
addressData.value.codep = "";
} else {
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
}
myForm.value.resetValidation();
await fetchSubDistrict(e, name);
}
};
function selectSubDistrict(e: string | null, name: string) {
if (e != null) {
if (name == "1") {
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
addressData.value.codep = namecode;
} else {
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
addressData.value.codec = namecode;
}
}
};
async function getNewData() {
await fetchData();
await fetchProvince();
await fetchDistrict(resultData.value.registrationProvinceId, "1");
await fetchDistrict(resultData.value.currentProvinceId, "2");
await fetchSubDistrict(resultData.value.registrationDistrictId, "1");
await fetchSubDistrict(resultData.value.currentDistrictId, "2");
await fetchDistrict(addressData.value.provinceId, "1");
await fetchDistrict(addressData.value.provinceIdC, "2");
await fetchSubDistrict(addressData.value.districtId, "1");
await fetchSubDistrict(addressData.value.districtIdC, "2");
}
function filterSelector(val: any, update: Function, refData: string) {
@ -554,15 +612,14 @@ function onSubmit() {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
// await saveData();
console.log("Hello");
modal.value = false;
}
});
}
onMounted(async () => {
await getNewData();
defaultAdd();
await getNewData();
});
</script>
<template>
@ -587,7 +644,7 @@ onMounted(async () => {
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
<!-- column 1 -->
<div class="col-md-6 col-12 row">
<div class="col-4 text-grey-6 text-weight-medium">
<div class="col-5 text-grey-6 text-weight-medium">
<div
v-for="label in Object.keys(dataLabel).slice(0, 5)"
class="q-py-xs"
@ -596,16 +653,16 @@ onMounted(async () => {
</div>
</div>
<!-- data -->
<div class="col-8">
<div class="col-7">
<div class="q-py-xs">
{{ resultData.registrationAddress }}
{{ addressData.address }}
</div>
<div class="q-py-xs">
{{
resultData.registrationProvinceId
addressData.provinceId
? (
Ops.provinceOps.find(
(r) => r.id === resultData.registrationProvinceId
(r) => r.id === addressData.provinceId
) || {}
).name
: "-"
@ -613,10 +670,10 @@ onMounted(async () => {
</div>
<div class="q-py-xs">
{{
resultData.registrationDistrictId
addressData.districtId
? (
Ops.districtOps.find(
(r) => r.id === resultData.registrationDistrictId
(r) => r.id === addressData.districtId
) || {}
).name
: "-"
@ -624,17 +681,17 @@ onMounted(async () => {
</div>
<div class="q-py-xs">
{{
resultData.registrationSubDistrictId
addressData.subdistrictId
? (
Ops.subdistrictOps.find(
(r) => r.id === resultData.registrationSubDistrictId
(r) => r.id === addressData.subdistrictId
) || {}
).name
: "-"
}}
</div>
<div class="q-py-xs">
{{ resultData.registrationZipCode }}
{{ addressData.codep }}
</div>
</div>
</div>
@ -642,12 +699,12 @@ onMounted(async () => {
<!-- column 2 -->
<div
class="text-grey-6 text-weight-medium"
v-if="resultData.registrationSame === '1'"
v-if="addressData.same === '1'"
>
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
</div>
<div class="col-md-6 col-12 row" v-else>
<div class="col-4 text-grey-6 text-weight-medium">
<div class="col-5 text-grey-6 text-weight-medium">
<div
v-for="label in Object.keys(dataLabel).slice(5, 10)"
class="q-py-xs"
@ -656,16 +713,16 @@ onMounted(async () => {
</div>
</div>
<!-- data -->
<div class="col-8">
<div class="col-7">
<div class="q-py-xs">
{{ resultData.currentAddress }}
{{ addressData.addressC }}
</div>
<div class="q-py-xs">
{{
resultData.currentProvinceId
addressData.provinceIdC
? (
Ops.provinceOps.find(
(r) => r.id === resultData.currentProvinceId
(r) => r.id === addressData.provinceIdC
) || {}
).name
: "-"
@ -673,10 +730,10 @@ onMounted(async () => {
</div>
<div class="q-py-xs">
{{
resultData.currentDistrictId
addressData.districtIdC
? (
Ops.districtOps.find(
(r) => r.id === resultData.currentDistrictId
Ops.districtCOps.find(
(r) => r.id === addressData.districtIdC
) || {}
).name
: "-"
@ -684,17 +741,17 @@ onMounted(async () => {
</div>
<div class="q-py-xs">
{{
resultData.currentSubDistrictId
addressData.subdistrictIdC
? (
Ops.subdistrictOps.find(
(r) => r.id === resultData.currentSubDistrictId
Ops.subdistrictCOps.find(
(r) => r.id === addressData.subdistrictIdC
) || {}
).name
: "-"
}}
</div>
<div class="q-py-xs">
{{ resultData.registrationZipCode }}
{{ addressData.codec }}
</div>
</div>
</div>
@ -719,14 +776,14 @@ onMounted(async () => {
lazy-rules
hide-bottom-space
type="textarea"
v-model="resultData.registrationAddress"
v-model="addressData.address"
:label="dataLabel.registrationAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
/>
</div>
<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">
<selector
<q-select
dense
outlined
use-input
@ -737,17 +794,18 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.registrationProvinceId"
v-model="addressData.provinceId"
:options="Ops.provinceOps"
:label="dataLabel.registrationProvince"
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
@update:model-value="(value:string) => selectProvince(value, '1')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -758,17 +816,18 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.registrationDistrictId"
v-model="addressData.districtId"
:options="Ops.districtOps"
:label="dataLabel.registrationDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
@update:model-value="(value:string) => selectDistrict(value, '1')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -779,10 +838,11 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.registrationSubDistrictId"
v-model="addressData.subdistrictId"
:options="Ops.subdistrictOps"
:label="dataLabel.registrationSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
) "
@ -795,7 +855,7 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="resultData.registrationZipCode"
v-model="addressData.codep"
:label="dataLabel.registrationZipCode"
/>
</div>
@ -806,24 +866,24 @@ onMounted(async () => {
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
>
<q-radio
v-model="resultData.registrationSame"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
dense
val="1"
label="ใช่"
dense
checked-icon="task_alt"
v-model="addressData.same"
unchecked-icon="panorama_fish_eye"
/>
<q-radio
v-model="resultData.registrationSame"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
dense
val="0"
label="ไม่"
dense
checked-icon="task_alt"
v-model="addressData.same"
unchecked-icon="panorama_fish_eye"
/>
</div>
<!-- current address -->
<div v-if="resultData.registrationSame === '0'">
<div v-if="addressData.same === '0'">
<div class="col-12 q-pb-xs">
<q-input
dense
@ -831,14 +891,14 @@ onMounted(async () => {
lazy-rules
hide-bottom-space
type="textarea"
v-model="resultData.currentAddress"
v-model="addressData.addressC"
:label="dataLabel.currentAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
/>
</div>
<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">
<selector
<q-select
dense
outlined
use-input
@ -849,17 +909,18 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.currentProvinceId"
v-model="addressData.provinceIdC"
:options="Ops.provinceOps"
:label="dataLabel.currentProvince"
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
@update:model-value="(value:string) => selectProvince(value, '2')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -870,17 +931,18 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.currentDistrictId"
:options="Ops.districtOps"
v-model="addressData.districtIdC"
:options="Ops.districtCOps"
:label="dataLabel.currentDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
@update:model-value="(value:string) => selectDistrict(value, '2')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
<q-select
dense
outlined
use-input
@ -891,10 +953,11 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="resultData.currentSubDistrictId"
:options="Ops.subdistrictOps"
v-model="addressData.subdistrictIdC"
:options="Ops.subdistrictCOps"
:label="dataLabel.currentSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
) "
@ -907,7 +970,7 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="resultData.registrationZipCode"
v-model="addressData.codec"
:label="dataLabel.registrationZipCode"
/>
</div>
@ -917,10 +980,10 @@ onMounted(async () => {
<q-separator />
<div class="text-right q-pa-sm">
<q-btn
id="onSubmit"
type="submit"
dense
unelevated
id="onSubmit"
type="submit"
label="บันทึก"
color="public"
class="q-px-md"
@ -933,14 +996,14 @@ onMounted(async () => {
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:tittle="tittleHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
:rows="rowsHistory"
:filter="filterHistory"
:columns="columnsHistory"
:visible-columns="visibleColumnsHistory"
>
<template #columns="props">
<q-tr :props="props">

1309
src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
View file

File diff suppressed because it is too large Load diff

649
src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
View file

@ -327,7 +327,6 @@ watch(
</script>
<template>
<div class="toptitle col text-dark">ประวัติการศึกษา</div>
<q-toolbar style="padding: 0px">
<q-btn
round
@ -341,6 +340,17 @@ watch(
>
<q-space />
<q-input
dense
outlined
v-model="formFilter.keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-if="mode === 'table'"
v-model="visibleColumns"
@ -361,7 +371,7 @@ watch(
<q-btn-toggle
v-model="mode"
dense
class="no-shadow"
class="no-shadow toggle-borderd"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
@ -449,10 +459,10 @@ watch(
</template>
<template v-slot:item="props" v-else>
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
>
<q-card bordered>
<q-card-actions align="right">
<q-card-actions align="right" class="bg-grey-3">
<q-btn
flat
round
@ -474,28 +484,30 @@ watch(
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
<div
class="q-pa-md"
v-for="(col, index) in props.cols"
:key="col.name"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
v-if="
col.name === 'startDate' ||
col.name === 'finishDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<div class="row">
<div class="col-5">
<div>{{ col.label }}</div>
</div>
<div class="col-7">
<div
v-if="
col.name === 'startDate' ||
col.name === 'finishDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
<div v-else>{{ col.value }}</div>
</div>
</div>
</div>
</q-list>
</q-card>
</div>
@ -503,7 +515,7 @@ watch(
</d-table>
<q-dialog v-model="addDataDialog" class="dialog" persistent>
<q-card style="min-width: 40%" class="bg-grey-11">
<q-card style="min-width: 40%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
@ -511,26 +523,28 @@ watch(
<q-separator color="grey-4" />
<div class="col">
<q-card-section class="row q-gutter-sm">
<q-input
outlined
v-model="educationData.level"
label="ระดับการศึกษา"
bg-color="white"
class="col"
dense
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
hide-bottom-space
/>
<q-input
outlined
v-model="educationData.institute"
label="สถานศึกษา"
bg-color="white"
class="col"
dense
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
hide-bottom-space
/>
<div class="col">
<q-input
outlined
v-model="educationData.level"
label="ระดับการศึกษา"
bg-color="white"
dense
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
hide-bottom-space
/>
</div>
<div class="col">
<q-input
outlined
v-model="educationData.institute"
label="สถานศึกษา"
bg-color="white"
dense
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
hide-bottom-space
/>
</div>
</q-card-section>
<q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
@ -552,284 +566,303 @@ watch(
/>
</div>
<div v-if="isDate === 'false'" class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="educationData.startYear"
:locale="'th'"
autoApply
class="col"
year-picker
:enableTimePicker="false"
@update:modelValue="educationData.startYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="educationData.startYear + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
]"
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="educationData.finishYear"
:locale="'th'"
autoApply
class="col"
year-picker
:enableTimePicker="false"
@update:modelValue="educationData.finishYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="educationData.finishYear + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
]"
:label="`${'ปีที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="educationData.startYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="educationData.startYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="educationData.startYear + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
]"
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="educationData.finishYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="educationData.finishYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="educationData.finishYear + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
]"
:label="`${'ปีที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div v-if="isDate === 'true'" class="row q-gutter-sm">
<datepicker
class="col"
menu-class-name="modalfix"
v-model="educationData.startDate"
: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
outlined
dense
lazy-rules
:model-value="date2Thai(educationData.startDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="educationData.finishDate"
:locale="'th'"
class="col"
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
outlined
dense
lazy-rules
:model-value="date2Thai(educationData.finishDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="educationData.startDate"
: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
outlined
dense
lazy-rules
:model-value="date2Thai(educationData.startDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="educationData.finishDate"
: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
outlined
dense
lazy-rules
:model-value="date2Thai(educationData.finishDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card>
<q-card-section class="row q-gutter-sm q-pt-sm">
<datepicker
menu-class-name="modalfix"
v-model="educationData.graduateDate"
:locale="'th'"
class="col"
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
outlined
bg-color="white"
dense
lazy-rules
:model-value="date2Thai(educationData.graduateDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
hide-bottom-space
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
outlined
dense
bg-color="white"
class="col"
v-model="educationData.isEducation"
:options="educationOption"
label="เป็นวุฒิการศึกษาในตำแหน่ง"
/>
<div class="col">
<datepicker
menu-class-name="modalfix"
v-model="educationData.graduateDate"
: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
outlined
bg-color="white"
dense
lazy-rules
:model-value="date2Thai(educationData.graduateDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
hide-bottom-space
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col">
<q-select
outlined
dense
bg-color="white"
v-model="educationData.isEducation"
:options="educationOption"
label="เป็นวุฒิการศึกษาในตำแหน่ง"
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-py-none">
<q-input
outlined
v-model="educationData.degree"
label="วุฒิการศึกษา"
bg-color="white"
class="col"
dense
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
hide-bottom-space
/>
<q-input
outlined
v-model="educationData.field"
label="สาขาวิชา/ทาง"
bg-color="white"
class="col"
dense
/>
<div class="col">
<q-input
outlined
v-model="educationData.degree"
label="วุฒิการศึกษา"
bg-color="white"
dense
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
hide-bottom-space
/>
</div>
<div class="col">
<q-input
outlined
v-model="educationData.field"
label="สาขาวิชา/ทาง"
bg-color="white"
dense
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<q-input
outlined
v-model="educationData.fundName"
label="ทุน"
bg-color="white"
class="col"
dense
/>
<q-input
outlined
v-model="educationData.gpa"
label="เกรดเฉลี่ย"
bg-color="white"
class="col"
dense
mask="#.##"
/>
<div class="col">
<q-input
outlined
v-model="educationData.fundName"
label="ทุน"
bg-color="white"
dense
/>
</div>
<div class="col">
<q-input
outlined
v-model="educationData.gpa"
label="เกรดเฉลี่ย"
bg-color="white"
dense
mask="#.##"
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<q-input
outlined
v-model="educationData.country"
label="ประเทศ"
bg-color="white"
class="col"
dense
/>
<q-input
outlined
v-model="educationData.other"
label="ข้อมูลติดต่อ"
bg-color="white"
class="col"
dense
/>
<div class="col">
<q-input
outlined
v-model="educationData.country"
label="ประเทศ"
bg-color="white"
dense
/>
</div>
<div class="col">
<q-input
outlined
v-model="educationData.other"
label="ข้อมูลติดต่อ"
bg-color="white"
dense
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<q-input
outlined
v-model="educationData.duration"
label="ระยะเวลา"
bg-color="white"
class="col"
dense
/>
<q-input
outlined
v-model="educationData.durationYear"
label="ระยะเวลาหลักสูตร"
bg-color="white"
class="col"
type="number"
dense
/>
<div class="col">
<q-input
outlined
v-model="educationData.duration"
label="ระยะเวลา"
bg-color="white"
dense
/>
</div>
<div class="col">
<q-input
outlined
v-model="educationData.durationYear"
label="ระยะเวลาหลักสูตร"
bg-color="white"
type="number"
dense
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm">
<q-input
outlined
v-model="educationData.note"
label="หมายเหตุ"
bg-color="white"
class="col"
dense
type="textarea"
/>
<div class="col">
<q-input
outlined
v-model="educationData.note"
label="หมายเหตุ"
bg-color="white"
dense
type="textarea"
/>
</div>
</q-card-section>
</div>
<q-card-actions align="right">
@ -850,7 +883,7 @@ watch(
</q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-card style="min-width: 70%" class="bg-grey-11">
<q-card style="min-width: 70%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header

69
src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
View file

@ -60,26 +60,26 @@ const historyDialog = ref<boolean>(false);
const rows = [
{
field: "กีต้าร์",
detail: "ตะแน่วๆ",
detail: "จับคอร์ดได้",
remark: "เล่นดีมาก",
reference: "อ้างอิง",
},
{
field: "ว่ายน้ำ",
detail: "ตะแน่วๆ",
remark: "เล่นดีมาก",
detail: "ดำน้ำนาน 5 นาที",
remark: "ว่ายน้ำเก่งมาก",
reference: "อ้างอิง",
},
{
field: "กีฬา",
detail: "ตะแน่วๆ",
detail: "จับคอร์ดได้",
remark: "เล่นดีมาก",
reference: "อ้างอิง",
},
{
field: "การเรียน",
detail: "ตะแน่วๆ",
remark: "เล่นดีมาก",
detail: "เรียนเก่งมาก",
remark: "ตั้งใจเรียนมาก",
reference: "อ้างอิง",
},
];
@ -133,11 +133,6 @@ async function onSubmit() {
}
</script>
<template>
<div class="row items-center q-gutter-sm">
<div class="toptitle text-dark row items-center q-py-xs">
ความสามารถพิเศษ
</div>
</div>
<q-toolbar style="padding: 0px" class="text-primary">
<q-btn flat round dense icon="add" @click="() => (dialog = true)">
<q-tooltip>เพิ่ม</q-tooltip>
@ -145,7 +140,6 @@ async function onSubmit() {
<q-space />
<q-input
dense
v-if="mode === 'table'"
outlined
v-model="formFilter.keyword"
label="ค้นหา"
@ -175,7 +169,7 @@ async function onSubmit() {
<q-btn-toggle
v-model="mode"
dense
class="no-shadow"
class="no-shadow toggle-borderd"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
@ -263,9 +257,10 @@ async function onSubmit() {
</q-btn>
<q-btn
flat
class="no-shadow toggle-borderd"
round
color="blue"
icon="history"
icon="mdi-history"
@click="historyDialog = true"
>
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
@ -288,7 +283,7 @@ async function onSubmit() {
</d-table>
<q-dialog v-model="dialog" class="dialog" persistent>
<q-card style="min-width: 40%" class="bg-grey-11">
<q-card style="min-width: 40%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
@ -296,26 +291,28 @@ async function onSubmit() {
<q-separator color="grey-4" />
<q-card-section class="col q-gutter-sm q-pr-md">
<div class="row q-gutter-sm q-ml-none">
<q-input
outlined
class="col"
dense
bg-color="white"
v-model="specialSkill.field"
label="ด้าน"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
/>
<q-input
outlined
class="col"
dense
bg-color="white"
v-model="specialSkill.detail"
label="รายละเอียด"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
<div class="col">
<q-input
outlined
dense
bg-color="white"
v-model="specialSkill.field"
label="ด้าน"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
/>
</div>
<div class="col">
<q-input
outlined
dense
bg-color="white"
v-model="specialSkill.detail"
label="รายละเอียด"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
</div>
</div>
<q-input
class="col-12"
@ -352,7 +349,7 @@ async function onSubmit() {
</q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-card style="min-width: 70%" class="bg-grey-11">
<q-card style="min-width: 70%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header

44
src/modules/04_registryNew/interface/index/Main.ts
View file

@ -28,6 +28,26 @@ interface InformationOps {
employeeTypeOps: DataOption[];
}
interface Information {
cardid: string | null;
prefix: string | null;
age: string | null;
prefixId: string | null;
firstname: string | null;
lastname: string | null;
birthDate: Date | null;
genderId: string | null;
bloodId: string | null;
nationality: string | null;
ethnicity: string | null;
statusId: string | null;
religionId: string | null;
tel: string | null;
employeeType: string | null;
employeeClass: string | null;
profileType: string | null;
}
interface AddressOps {
provinceOps: DataOption[];
districtOps: DataOption[];
@ -50,6 +70,26 @@ interface Address {
codep: string | null;
}
const defaultInformation: Information = {
cardid: null,
age: null,
prefix: null,
prefixId: null,
firstname: null,
lastname: null,
birthDate: null,
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
};
const defaultAddress: Address = {
address: null,
provinceId: null,
@ -63,13 +103,15 @@ const defaultAddress: Address = {
codep: null,
same: "0",
};
export { defaultAddress };
export { defaultAddress, defaultInformation };
export type {
Pagination,
DataOption,
DataOption2,
zipCodeOption,
InformationOps,
Information,
AddressOps,
Address,
};

9
src/modules/04_registryNew/interface/index/profesLicense.ts Normal file
View file

@ -0,0 +1,9 @@
interface ProfesLicenseObject {
certificateType: string;
issuer: string;
certificateNo: string;
issueDate: Date;
expireDate: Date;
}
export type { ProfesLicenseObject };

10
src/modules/04_registryNew/views/detailView.vue
View file

@ -39,6 +39,12 @@ const itemsMenu = ref<DataOption[]>([
name: "อื่นๆ",
},
]);
const input = document.createElement("input");
input.type = "file";
function selectFile() {
input.click();
}
function fetchDataPersonal() {
const data = {
@ -148,7 +154,9 @@ onMounted(() => {
text-color="primary"
icon="mdi-pencil-outline"
style="position: absolute; bottom: 0; right: 0"
/>
@click="selectFile"
>
</q-btn>
</div>
<div class="col row items-center bg-teal-1">

75
src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import { computed, ref, reactive, watch } from "vue";
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
@ -24,6 +26,10 @@ const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
isStatusEdit: { type: Boolean, required: true },
data: { type: Object, required: true },
fetchData: {
type: Function,
required: true,
},
});
const formData = reactive<FormDataChar>({
name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
@ -43,6 +49,29 @@ const ObjectRef: ObjectCharRef = {
group: groupRef,
};
function fetchSalaryDetail(id: string) {
showLoader();
http
.get(config.API.salaryEmployeeChartByid(id))
.then((res) => {
const data = res.data.result;
formData.name = data.name;
formData.group = data.group;
formData.isActive = data.isActive;
formData.date = data.date;
formData.startDate = data.startDate;
formData.endDate = data.endDate;
formData.details = data.details;
isReadonly.value = data.isActive ? true : false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const isReadonly = ref<boolean>(false);
function onClickSubmit() {
const hasError = [];
@ -62,8 +91,21 @@ function onClickSubmit() {
}
}
function onSubmit() {
console.log(props.isStatusEdit);
async function onSubmit() {
showLoader();
try {
const url = !props.isStatusEdit
? config.API.salaryEmployeeChart
: config.API.salaryEmployeeChartByid(props.data.id);
await http[!props.isStatusEdit ? "post" : "put"](url, formData);
success($q, "บันทีกข้อมูลสำเร็จ");
props.fetchData?.();
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
closeDialog();
}
}
function closeDialog() {
@ -94,16 +136,7 @@ watch(
() => modal.value,
() => {
if (modal.value && props.isStatusEdit) {
console.log(props.data);
const data = props.data;
formData.name = data.name;
formData.group = data.group;
formData.isActive = data.isActive;
formData.date = data.date;
formData.startDate = null;
formData.endDate = null;
formData.details = "";
isReadonly.value = data.isActive ? true : false;
fetchSalaryDetail(props.data.id);
}
}
);
@ -112,7 +145,14 @@ watch(
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<form @submit.prevent.stop="onClickSubmit">
<Header tittle="test" :close="closeDialog" />
<Header
:tittle="
props.isStatusEdit
? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
: 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
"
:close="closeDialog"
/>
<q-separator />
<q-card-section class="scroll" style="max-height: 70vh">
<div class="row col-12 q-col-gutter-sm">
@ -310,7 +350,12 @@ watch(
</q-card-section>
<q-separator />
<div class="text-right q-ma-sm">
<q-btn label="บันทึก" type="submit" color="secondary">
<q-btn
label="บันทึก"
type="submit"
color="secondary"
:disable="isReadonly"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</div>

83
src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
View file

@ -1,11 +1,12 @@
<script setup lang="ts">
import { computed, ref, reactive, watch } from "vue";
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
import Header from "@/components/DialogHeader.vue";
@ -22,7 +23,7 @@ const {
success,
} = useCounterMixin();
const salaryId = ref<string>(route.params.id.toString());
const salaryEmployeeId = ref<string>(route.params.id.toString());
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
@ -34,6 +35,10 @@ const props = defineProps({
type: Object,
defult: [],
},
fetchData: {
type: Function,
required: true,
},
});
const formData = reactive<any>({
@ -47,7 +52,7 @@ const salaryNoRef = ref<Object | null>(null);
const salaryMonthRef = ref<Object | null>(null);
const salaryDayRef = ref<Object | null>(null);
const ObjectRef: any = {
const ObjectRef: ObjectReteRef = {
salaryNo: salaryNoRef,
salaryMonth: salaryMonthRef,
salaryDay: salaryDayRef,
@ -65,7 +70,6 @@ function clearFormData() {
}
function onClickSubmit() {
console.log(formData.salaryHalfSpecial);
const hasError = [];
for (const key in ObjectRef) {
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
@ -82,30 +86,57 @@ function onClickSubmit() {
}
function onSubmit() {
dialogConfirm($q, () => {
closeDialog();
dialogConfirm($q, async () => {
showLoader();
const body: FormDataRate = {
salaryEmployeeId: !props.isStatusEdit
? salaryEmployeeId.value
: undefined,
step:
typeof formData.salaryNo === "number"
? formData.salaryNo
: Number(formData.salaryNo.replace(/,/g, "")),
salaryMonth:
typeof formData.salaryMonth === "number"
? formData.salaryMonth
: Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
salaryDay:
typeof formData.salaryDay === "number"
? formData.salaryDay
: Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
};
try {
const url = !props.isStatusEdit
? config.API.salaryEmployeeRateList
: config.API.salaryEmployeeRateListByid(props?.data?.id);
await http[!props.isStatusEdit ? "post" : "put"](url, body);
success($q, "บันทีกข้อมูลสำเร็จ");
props.fetchData?.();
} catch (err) {
messageError($q, err);
hideLoader();
} finally {
closeDialog();
}
});
}
// watch(
// () => modal.value,
// () => {
// if (modal.value && props.typeAction === "edit") {
// if (props.data) {
// const data = props.data;
// formData.salaryId = data.id;
// formData.salary = data.salary;
// formData.salaryHalf = data.salaryHalf;
// formData.salaryHalfSpecial = data.salaryHalfSpecial;
// formData.salaryFull = data.salaryFull;
// formData.salaryFullSpecial = data.salaryFullSpecial;
// formData.salaryFullHalf = data.salaryFullHalf;
// formData.salaryFullHalfSpecial = data.salaryFullHalfSpecial;
// formData.isNext = data.isNext;
// }
// }
// }
// );
watch(
() => modal.value,
() => {
if (modal.value && props.isStatusEdit) {
if (props.data) {
const data = props.data;
console.log(data);
formData.salaryNo = data.step;
formData.salaryMonth = data.salaryMonth;
formData.salaryDay = data.salaryDay;
}
}
}
);
</script>
<template>

281
src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue Normal file
View file

@ -0,0 +1,281 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import Header from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const {
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
dialogRemove,
} = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
id: {
type: String,
defult: "",
},
isActive: {
type: Boolean,
defult: false,
},
});
const salaryId = ref<string>("");
const documentFile = ref<any>(null);
const itemsDocument = ref<any>([]);
async function fetchDocumentFile(id: string) {
showLoader();
await http
.get(config.API.salaryEmployeeChartFile(id))
.then((res) => {
const list = res.data.map((e: any) => ({ name: e.fileName }));
itemsDocument.value = list;
})
.catch(() => {})
.finally(() => {
hideLoader();
});
}
watch(
() => modal.value,
async () => {
if (modal.value) {
if (props.id) {
salaryId.value = props.id;
await fetchDocumentFile(props.id);
}
}
}
);
function closeDialog() {
modal.value = !modal.value;
}
async function uploadDocumentFile() {
const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
showLoader();
const formData = new FormData();
formData.append("file", documentFile.value);
const body = {
replace: false,
fileList: {
fileName: fileName,
},
};
await http
.post(config.API.salaryEmployeeChartFile(salaryId.value), body)
.then((res) => {
console.log(res);
const foundKey: any = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
const link = res.data[foundKey]?.uploadUrl;
fileUpLoad(link);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function อัปโหลดไฟล์
* @param url link อัปโหลด
*/
function fileUpLoad(url: string) {
axios
.put(url, documentFile.value, {
headers: { "Content-Type": documentFile.value?.type },
onUploadProgress: (e) => console.log(e),
})
.then(() => {
success($q, "อัปโหลดไฟล์สำเร็จ");
documentFile.value = null;
fetchDocumentFile(salaryId.value);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
function onClickDeleteFile(fileName: string) {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
.then(() => {
setTimeout(() => {
fetchDocumentFile(salaryId.value);
success($q, "ลบไฟล์สำเร็จ");
}, 1000);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 1000);
});
});
}
async function onClickDonwload(fileName: string) {
showLoader();
await http
.get(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
.then((res) => {
const data = res.data;
downloadFile(data.downloadUrl, data.fileType, fileName);
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
}
/**
* function เรียกไฟล์ PDF
* @param url link PDF
* @param type ประเภทไฟล์
* @param fileName ชือไฟล์
*/
async function downloadFile(url: string, type: string, fileName: string) {
await axios
.get(url, {
method: "GET",
responseType: "blob",
headers: {
"Content-Type": "application/json",
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
},
})
.then(async (res) => {
const a = document.createElement("a");
a.href = window.URL.createObjectURL(res.data);
a.download = fileName;
a.click();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
<q-separator />
<q-card-section class="scroll" style="max-height: 70vh">
<div class="row col-12 q-col-gutter-sm">
<div class="col-md-12">
<div class="col-xs-12 col-md-3">
<div class="row col-12 q-col-gutter-y-sm">
<div class="col-12 row">
<div v-if="!props.isActive" class="full-width">
<q-file
class="col-12"
outlined
dense
v-model="documentFile"
label="เอกสารอ้างอิง"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
v-if="documentFile"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadDocumentFile"
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
<div v-if="itemsDocument.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
v-for="file in itemsDocument"
:key="file.id"
clickable
v-ripple
>
<q-item-section>{{ file.name }}</q-item-section>
<q-item-section avatar>
<div class="row q-col-gutter-md">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
@click="onClickDonwload(file.name)"
>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-btn>
</div>
<div v-if="!props.isActive">
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
@click="onClickDeleteFile(file.name)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped></style>

242
src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
View file

@ -1,6 +1,244 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, reactive } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
const {
date2Thai,
dialogRemove,
messageError,
showLoader,
hideLoader,
success,
} = useCounterMixin();
/** ข้อมูล Table*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "groupPos",
align: "left",
label: "กลุ่มงานช่างตำแหน่ง",
sortable: true,
field: "groupPos",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "minimumOld",
align: "left",
label: "อัตราค่าจ้าง ขั้นต่ำสุด",
sortable: true,
field: "minimumOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "groupOld",
align: "left",
label: "อัตราค่าจ้าง กลุ่มกบัญชีค่าจ่าง",
sortable: true,
field: "groupOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "maximumOld",
align: "left",
label: "อัตราค่าจ้าง ขั้นสูงสุดเดิม",
sortable: true,
field: "maximumOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "groupHigher",
align: "left",
label: "อัตราค่าจ้างสูงกว่า กลุ่มกบัญชีค่าจ่าง",
sortable: true,
field: "groupHigher",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "maximumNew",
align: "left",
label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
sortable: true,
field: "maximumNew",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "reson",
align: "left",
label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
sortable: true,
field: "maximumNew",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"groupPos",
"level",
"minimumOld",
"groupOld",
"maximumOld",
"groupHigher",
]);
const rows = ref<any>([
{
id: "1",
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
group: 1,
date: new Date(),
isActive: true,
},
{
id: "2",
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
group: 2,
date: new Date(),
isActive: false,
},
]);
const formFilter = reactive({
page: 1,
pageSize: 10,
keyword: "",
});
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
</script>
<template>
<div>2</div>
<d-table
flat
bordered
dense
:rows="rows"
:columns="columns"
row-key="name"
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-th auto-width />
</q-tr>
<q-separator />
</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 v-if="col.name === 'date'">
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else-if="col.name === 'group'">
{{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
</div>
<div v-else-if="col.name === 'isActive'">
<q-icon
:name="col.value ? 'done' : 'close'"
:color="col.value ? 'primary' : 'grey'"
size="24px"
></q-icon>
</div>
<div v-else>{{ col.value ? col.value : "-" }}</div>
</q-td>
<!-- <q-td>
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
size="12px"
>
<q-menu>
<q-list dense style="min-width: 200px">
<q-item
v-for="(item, index) in itemMenu"
:key="index"
clickable
v-close-popup
@click.stop="onClickAction(item.type, props.row)"
>
<q-item-section>
<div class="row items-center">
<q-icon
:color="item.color"
size="17px"
:name="item.icon"
/>
<div class="q-pl-md">{{ item.label }}</div>
</div>
</q-item-section>
</q-item>
<q-item
v-if="props.row.isActive == false"
clickable
v-close-popup
@click.stop="onClickDelete(props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon color="red" size="17px" name="delete" />
<div class="q-pl-md">ลบ</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td> -->
</q-tr>
</template>
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="1"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template> -->
</d-table>
</template>
<style scoped></style>

143
src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
View file

@ -1,14 +1,22 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { QTableProps } from "quasar";
import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
import type {
ItemsMenu,
NewPagination,
} from "@/modules/13_salary/interface/index/Main";
import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
/** importComponents*/
import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
@ -25,11 +33,12 @@ const {
success,
} = useCounterMixin();
const formFilter = reactive({
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 10,
keyword: "",
});
const maxPage = ref<number>(1);
/** ข้อมูล Table*/
const columns = ref<QTableProps["columns"]>([
@ -70,27 +79,9 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
const rows = ref<any>([
{
id: "1",
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
group: 1,
date: new Date(),
isActive: true,
},
{
id: "2",
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
group: 2,
date: new Date(),
isActive: false,
},
]);
const rows = ref<EmployeeSalary[]>([]);
const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
/** List Mune*/
const itemMenu = ref<ItemsMenu[]>([
{
@ -106,7 +97,7 @@ const itemMenu = ref<ItemsMenu[]>([
type: "upload",
},
{
label: "อัตราเงินเดือน",
label: "อัตราค่าจ้าง",
icon: "mdi-format-list-bulleted-triangle",
color: "secondary",
type: "salaryRate",
@ -119,18 +110,37 @@ const itemMenu = ref<ItemsMenu[]>([
},
]);
function onClickAction(type: string, data: any) {
function fetchListChart() {
showLoader();
http
.get(
config.API.salaryEmployeeChart +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
)
.then((res) => {
rows.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function onClickAction(type: string, data: EmployeeSalary) {
switch (type) {
case "edit":
onEdit(data);
break;
case "upload":
onUpload();
onUpload(data.id, data.isActive);
break;
case "salaryRate":
onSalaryRate(data.id);
break;
case "coppy":
case "copy":
onCoppy(data.id);
break;
@ -139,30 +149,83 @@ function onClickAction(type: string, data: any) {
}
}
function onEdit(data: any) {
function onEdit(data: EmployeeSalary) {
modalDialogEmployeeChart.value = true;
isStatusEdit.value = true;
dataRow.value = data;
}
function onUpload() {}
const modalDialogUpload = ref<boolean>(false);
const salaryChartId = ref<string>("");
const isActive = ref<boolean>(false);
function onUpload(id: string, status: boolean) {
modalDialogUpload.value = true;
salaryChartId.value = id;
isActive.value = status;
}
function onSalaryRate(id: string) {
router.push(`/salary-employee/rate/${id}`);
}
function onCoppy(id: string) {}
function onCoppy(id: string) {
http
.post(config.API.salaryEmployeeChartCopy, { id: id })
.then(() => {
fetchListChart();
success($q, "คัดลอกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
});
}
function onClickDelete(id: string) {
dialogRemove($q, () => {});
dialogRemove($q, () => {
http
.delete(config.API.salaryEmployeeChartByid(id))
.then(() => {
fetchListChart();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
});
});
}
const modalDialogEmployeeChart = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const dataRow = ref<any>();
const dataRow = ref<EmployeeSalary>();
function onClickAdd() {
modalDialogEmployeeChart.value = true;
isStatusEdit.value = false;
}
function filterFn() {
formFilter.page = 1;
fetchListChart();
}
function updatePage(val: number) {
formFilter.page = val;
fetchListChart();
}
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
watch(
() => formFilter.pageSize,
() => {
fetchListChart();
}
);
onMounted(() => {
fetchListChart();
});
</script>
<template>
<q-toolbar class="text-primary" style="padding: 0px">
@ -173,10 +236,10 @@ function onClickAdd() {
<q-input
borderless
dense
debounce="300"
outlined
v-model="formFilter.keyword"
placeholder="ค้นหา"
@keydown.enter.pervrnt="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
@ -206,9 +269,9 @@ function onClickAdd() {
:rows="rows"
:columns="columns"
row-key="name"
v-model:pagination="pagination"
:rows-per-page-options="[10, 20, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePageSize"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -290,11 +353,12 @@ function onClickAdd() {
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="1"
:max="maxPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePage"
></q-pagination>
</template>
</d-table>
@ -302,7 +366,14 @@ function onClickAdd() {
<DialogEmployeeChart
v-model:modal="modalDialogEmployeeChart"
:isStatusEdit="isStatusEdit"
:data="dataRow"
:data="dataRow as EmployeeSalary"
:fetchData="fetchListChart"
/>
<DialogEmployeeUpload
v-model:modal="modalDialogUpload"
:id="salaryChartId"
:isActive="isActive"
/>
</template>

10
src/modules/13_salary/interface/index/EmployeeChart.ts
View file

@ -4,4 +4,12 @@ interface ObjectCharRef {
[key: string]: any;
}
export type { ObjectCharRef };
interface ObjectReteRef {
salaryNo: object | null;
salaryMonth: object | null;
salaryDay: object | null;
[key: string]: any;
}
export type { ObjectCharRef, ObjectReteRef };

16
src/modules/13_salary/interface/request/EmployeeChart.ts
View file

@ -7,4 +7,18 @@ interface FormDataChar {
endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
details: string; //คำอธิบาย
}
export type { FormDataChar };
interface FormFilter {
page: number;
pageSize: number;
keyword: string;
}
interface FormDataRate {
salaryEmployeeId: string | undefined;
step: number;
salaryMonth: number;
salaryDay: number;
}
export type { FormDataChar, FormFilter, FormDataRate };

17
src/modules/13_salary/interface/response/salaryEmployeeChart.ts Normal file
View file

@ -0,0 +1,17 @@
interface EmployeeSalary {
date: Date;
details: string;
endDate: Date;
group: number;
id: string;
isActive: boolean;
name: string;
startDate: Date;
}
interface EmployeeRateSalary {
id: string;
salaryDay: number;
salaryMonth: number;
step: number;
}
export type { EmployeeSalary, EmployeeRateSalary };

126
src/modules/13_salary/views/salaryEmployeeRate.vue
View file

@ -1,11 +1,18 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { QTableProps } from "quasar";
import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
import type {
ItemsMenu,
NewPagination,
} from "@/modules/13_salary/interface/index/Main";
import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
import type { EmployeeRateSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
/** importComponts*/
import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
@ -14,49 +21,46 @@ import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeCha
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const route = useRoute();
const router = useRouter();
const $q = useQuasar();
const { dialogRemove, messageError, showLoader, hideLoader, success } =
useCounterMixin();
const salaryEmployeeId = ref<string>(route.params.id.toString());
/** ข้อมูล Table*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
name: "step",
align: "left",
label: "ลำดับขั้น",
sortable: true,
field: "no",
field: "step",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "month",
name: "salaryMonth",
align: "left",
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
sortable: true,
field: "month",
field: "salaryMonth",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "day",
name: "salaryDay",
align: "left",
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
sortable: true,
field: "day",
field: "salaryDay",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<any>([
{
no: "1",
month: 100000,
day: 5000,
},
]);
const visibleColumns = ref<string[]>(["no", "month", "day"]);
const rows = ref<EmployeeRateSalary[]>([]);
const visibleColumns = ref<string[]>(["step", "salaryMonth", "salaryDay"]);
/** List Mune*/
const itemMenu = ref<ItemsMenu[]>([
@ -75,26 +79,48 @@ const itemMenu = ref<ItemsMenu[]>([
},
]);
const formFilter = reactive({
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 10,
keyword: "",
});
const maxPage = ref<number>(1);
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
function fetchSalalyEmployeeRate() {
showLoader();
http
.get(
config.API.salaryEmployeeRateListByid(salaryEmployeeId.value) +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
)
.then((res) => {
rows.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const modalDialogEmployeeRate = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const dataRow = ref<EmployeeRateSalary>();
function onClickAction(type: string, data: any) {
function onClickAction(type: string, data: EmployeeRateSalary) {
switch (type) {
case "edit":
onEdit();
onEdit(data);
break;
case "delete":
onDelete();
onDelete(data.id);
break;
default:
@ -102,19 +128,58 @@ function onClickAction(type: string, data: any) {
}
}
function onEdit() {
function onEdit(data: EmployeeRateSalary) {
modalDialogEmployeeRate.value = true;
isStatusEdit.value = true;
dataRow.value = data;
}
function onDelete() {
dialogRemove($q, () => {});
function onDelete(id: string) {
dialogRemove($q, () => {
http
.delete(config.API.salaryEmployeeRateListByid(id))
.then(() => {
fetchSalalyEmployeeRate();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
hideLoader();
})
.finally(() => {});
});
}
function onClickAdd() {
modalDialogEmployeeRate.value = true;
isStatusEdit.value = false;
}
function filterFn() {
formFilter.page = 1;
fetchSalalyEmployeeRate();
}
function updatePage(val: number) {
formFilter.page = val;
fetchSalalyEmployeeRate();
}
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
watch(
() => formFilter.pageSize,
() => {
fetchSalalyEmployeeRate();
}
);
onMounted(() => {
fetchSalalyEmployeeRate();
});
</script>
<template>
<div class="row items-center">
@ -141,9 +206,9 @@ function onClickAdd() {
<q-input
borderless
dense
debounce="300"
outlined
v-model="formFilter.keyword"
@keydown.enter.pervrnt="filterFn"
placeholder="ค้นหา"
>
<template v-slot:append>
@ -175,9 +240,9 @@ function onClickAdd() {
:rows="rows"
:columns="columns"
row-key="name"
v-model:pagination="pagination"
:rows-per-page-options="[10, 20, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePageSize"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -191,10 +256,10 @@ function onClickAdd() {
<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 v-if="col.name === 'month'">
<div v-if="col.name === 'salaryMonth'">
{{ col.value ? col.value.toLocaleString() : "-" }}
</div>
<div v-else-if="col.name === 'day'">
<div v-else-if="col.name === 'salaryDay'">
{{ col.value ? col.value.toLocaleString() : "-" }}
</div>
<div v-else>{{ col.value ? col.value : "-" }}</div>
@ -239,11 +304,12 @@ function onClickAdd() {
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="1"
:max="maxPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePage"
></q-pagination>
</template>
</d-table>
@ -253,6 +319,8 @@ function onClickAdd() {
<DialogEmployeeRate
v-model:modal="modalDialogEmployeeRate"
:isStatusEdit="isStatusEdit"
:fetchData="fetchSalalyEmployeeRate"
:data="dataRow as EmployeeRateSalary"
/>
</template>