Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
f870c08405
22 changed files with 3754 additions and 1205 deletions
|
|
@ -29,5 +29,16 @@ export default {
|
||||||
salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
|
salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
|
||||||
salaryPeriodProfile: `${salary}/period/org/profile`,
|
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}`,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,8 @@ const orgLevelOptionMain = ref<DataOption[]>([
|
||||||
{ name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
|
{ name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const orgLevelSubOptionMain = ref<DataOption[]>([]);
|
||||||
|
|
||||||
const orgLevelOption = ref<DataOption[]>([]);
|
const orgLevelOption = ref<DataOption[]>([]);
|
||||||
|
|
||||||
const orgNameRef = ref<Object | null>(null);
|
const orgNameRef = ref<Object | null>(null);
|
||||||
|
|
@ -70,6 +72,7 @@ const orgCodeRef = ref<Object | null>(null);
|
||||||
// const orgPhoneInRef = ref<Object | null>(null);
|
// const orgPhoneInRef = ref<Object | null>(null);
|
||||||
// const orgFaxRef = ref<Object | null>(null);
|
// const orgFaxRef = ref<Object | null>(null);
|
||||||
const orgLevelRef = ref<Object | null>(null);
|
const orgLevelRef = ref<Object | null>(null);
|
||||||
|
const orgLevelSubRef = ref<Object | null>(null);
|
||||||
|
|
||||||
const formData = reactive<FormDataAgency>({
|
const formData = reactive<FormDataAgency>({
|
||||||
orgName: "",
|
orgName: "",
|
||||||
|
|
@ -79,6 +82,7 @@ const formData = reactive<FormDataAgency>({
|
||||||
orgPhoneIn: "",
|
orgPhoneIn: "",
|
||||||
orgFax: "",
|
orgFax: "",
|
||||||
orgLevel: "",
|
orgLevel: "",
|
||||||
|
orgLevelSub: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
|
@ -90,6 +94,7 @@ const objectComplaintsRef: FormAgencyRef = {
|
||||||
// orgPhoneIn: orgPhoneInRef,
|
// orgPhoneIn: orgPhoneInRef,
|
||||||
// orgFax: orgFaxRef,
|
// orgFax: orgFaxRef,
|
||||||
orgLevel: orgLevelRef,
|
orgLevel: orgLevelRef,
|
||||||
|
orgLevelSub: orgLevelSubRef,
|
||||||
};
|
};
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
|
@ -141,8 +146,12 @@ function onSubmit() {
|
||||||
["org" + type + "PhoneIn"]: formData.orgPhoneIn,
|
["org" + type + "PhoneIn"]: formData.orgPhoneIn,
|
||||||
["org" + type + "Fax"]: formData.orgFax,
|
["org" + type + "Fax"]: formData.orgFax,
|
||||||
["org" + type + "Rank"]: formData.orgLevel,
|
["org" + type + "Rank"]: formData.orgLevel,
|
||||||
|
["org" + type + "RankSub"]:
|
||||||
|
level.value !== 0 ? formData.orgLevelSub : undefined,
|
||||||
[nameId]: rootId,
|
[nameId]: rootId,
|
||||||
};
|
};
|
||||||
|
console.log(body);
|
||||||
|
|
||||||
if (actionType.value === "ADD") {
|
if (actionType.value === "ADD") {
|
||||||
await http
|
await http
|
||||||
.post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
|
.post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
|
||||||
|
|
@ -229,6 +238,7 @@ watch(
|
||||||
props.dataNode.orgTreeRank === "DEPARTMENT"
|
props.dataNode.orgTreeRank === "DEPARTMENT"
|
||||||
? orgLevelOptionMain.value
|
? orgLevelOptionMain.value
|
||||||
: orgLevelOptionMain.value.slice(1, 4);
|
: orgLevelOptionMain.value.slice(1, 4);
|
||||||
|
selectOrgLevele(formData.orgLevel);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -245,6 +255,45 @@ const tittleName = computed(() => {
|
||||||
|
|
||||||
return name;
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -323,6 +372,7 @@ const tittleName = computed(() => {
|
||||||
emit-value
|
emit-value
|
||||||
map-options
|
map-options
|
||||||
v-model="formData.orgLevel"
|
v-model="formData.orgLevel"
|
||||||
|
@update:model-value="selectOrgLevele"
|
||||||
:options="orgLevelOption"
|
:options="orgLevelOption"
|
||||||
:label="
|
:label="
|
||||||
level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
|
level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
|
||||||
|
|
@ -339,6 +389,26 @@ const tittleName = computed(() => {
|
||||||
lazy-rules
|
lazy-rules
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div class="col-4">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.orgPhoneEx"
|
v-model="formData.orgPhoneEx"
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ interface FormDataAgency {
|
||||||
orgPhoneIn: string;
|
orgPhoneIn: string;
|
||||||
orgFax: string;
|
orgFax: string;
|
||||||
orgLevel: string;
|
orgLevel: string;
|
||||||
|
orgLevelSub: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FormDataPosition {
|
interface FormDataPosition {
|
||||||
|
|
@ -125,8 +126,6 @@ interface NewPagination {
|
||||||
sortBy: string;
|
sortBy: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
Pagination,
|
Pagination,
|
||||||
DataOption,
|
DataOption,
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
.borderCard {
|
||||||
|
border: 1px solid #d0d0d0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,17 @@ import HistoryTable from "@/components/TableHistory.vue";
|
||||||
import DialogHeader from "@/components/DialogHeader.vue";
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
import type {
|
import type {
|
||||||
InformationOps,
|
InformationOps,
|
||||||
|
Information,
|
||||||
DataOption,
|
DataOption,
|
||||||
} from "@/modules/04_registryNew/interface/index/Main";
|
} 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";
|
import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
||||||
|
|
||||||
|
const informaData = ref<Information>(defaultInformation);
|
||||||
const modal = ref<boolean>(false);
|
const modal = ref<boolean>(false);
|
||||||
const myForm = ref<any>();
|
const myForm = ref<any>();
|
||||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||||
|
|
@ -300,6 +303,26 @@ const visibleColumnsHistory = ref<String[]>([
|
||||||
"createdAt",
|
"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
|
// get person detail list
|
||||||
async function fetchPerson() {
|
async function fetchPerson() {
|
||||||
// showLoader();
|
// showLoader();
|
||||||
|
|
@ -478,6 +501,7 @@ function onSubmit() {
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchPerson();
|
await fetchPerson();
|
||||||
|
await fetchData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -513,29 +537,35 @@ onMounted(async () => {
|
||||||
<!-- data -->
|
<!-- data -->
|
||||||
<div class="col-md-8 col-7">
|
<div class="col-md-8 col-7">
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.citizenId }}
|
{{ informaData.cardid }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
`${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
|
`${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ date2Thai(resultData.birthDate) }}
|
{{ date2Thai(informaData.birthDate) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.age ? resultData.age : "-" }}
|
{{ informaData.age ? informaData.age : "-" }}
|
||||||
</div>
|
|
||||||
<div class="q-py-xs">
|
|
||||||
{{ resultData.gender ? resultData.gender : "-" }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.relationshipId
|
informaData.genderId
|
||||||
? (
|
? (
|
||||||
Ops.statusOps.find(
|
Ops.genderOps.find((r) => r.id === informaData.genderId) ||
|
||||||
(r) => r.id === resultData.relationshipId
|
{}
|
||||||
) || {}
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
informaData.statusId
|
||||||
|
? (
|
||||||
|
Ops.statusOps.find((r) => r.id === informaData.statusId) ||
|
||||||
|
{}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
}}
|
}}
|
||||||
|
|
@ -556,17 +586,17 @@ onMounted(async () => {
|
||||||
<!-- data -->
|
<!-- data -->
|
||||||
<div class="col-md-8 col-7">
|
<div class="col-md-8 col-7">
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.nationality ? resultData.nationality : "-" }}
|
{{ informaData.nationality ? informaData.nationality : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.race ? resultData.race : "-" }}
|
{{ informaData.ethnicity ? informaData.ethnicity : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.religionId
|
informaData.religionId
|
||||||
? (
|
? (
|
||||||
Ops.religionOps.find(
|
Ops.religionOps.find(
|
||||||
(r) => r.id === resultData.religionId
|
(r) => r.id === informaData.religionId
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
|
|
@ -574,17 +604,14 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.bloodGroupId
|
informaData.bloodId
|
||||||
? (
|
? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
|
||||||
Ops.bloodOps.find(
|
.name
|
||||||
(b) => b.id === resultData.bloodGroupId
|
|
||||||
) || {}
|
|
||||||
).name
|
|
||||||
: "-"
|
: "-"
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
|
{{ informaData.tel ? informaData.tel : "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -610,7 +637,7 @@ onMounted(async () => {
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
maxlength="13"
|
maxlength="13"
|
||||||
mask="#############"
|
mask="#############"
|
||||||
v-model="resultData.citizenId"
|
v-model="informaData.cardid"
|
||||||
:label="dataLabel.citizenId"
|
:label="dataLabel.citizenId"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||||
|
|
@ -621,7 +648,7 @@ onMounted(async () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -632,7 +659,7 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.prefixId"
|
v-model="informaData.prefixId"
|
||||||
:options="Ops.prefixOps"
|
:options="Ops.prefixOps"
|
||||||
:label="dataLabel.prefix"
|
:label="dataLabel.prefix"
|
||||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||||
|
|
@ -647,7 +674,7 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="resultData.firstName"
|
v-model="informaData.firstname"
|
||||||
:label="dataLabel.firstName"
|
:label="dataLabel.firstName"
|
||||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
@ -658,7 +685,7 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="resultData.lastName"
|
v-model="informaData.lastname"
|
||||||
:label="dataLabel.lastName"
|
:label="dataLabel.lastName"
|
||||||
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
@ -669,7 +696,7 @@ onMounted(async () => {
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="resultData.birthDate"
|
v-model="informaData.birthDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
|
|
@ -686,8 +713,8 @@ onMounted(async () => {
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="
|
:model-value="
|
||||||
resultData.birthDate != null
|
informaData.birthDate != null
|
||||||
? date2Thai(resultData.birthDate)
|
? date2Thai(informaData.birthDate)
|
||||||
: null
|
: null
|
||||||
"
|
"
|
||||||
:label="dataLabel.birthDate"
|
:label="dataLabel.birthDate"
|
||||||
|
|
@ -714,12 +741,12 @@ onMounted(async () => {
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
readonly
|
readonly
|
||||||
v-model="resultData.age"
|
v-model="informaData.age"
|
||||||
:label="dataLabel.age"
|
:label="dataLabel.age"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -730,7 +757,7 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.genderId"
|
v-model="informaData.genderId"
|
||||||
:options="Ops.genderOps"
|
:options="Ops.genderOps"
|
||||||
:label="dataLabel.gender"
|
:label="dataLabel.gender"
|
||||||
@filter="(inputValue: any,
|
@filter="(inputValue: any,
|
||||||
|
|
@ -739,7 +766,7 @@ onMounted(async () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -750,7 +777,7 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.relationshipId"
|
v-model="informaData.statusId"
|
||||||
:options="Ops.statusOps"
|
:options="Ops.statusOps"
|
||||||
:label="dataLabel.relationship"
|
:label="dataLabel.relationship"
|
||||||
@filter="(inputValue: any,
|
@filter="(inputValue: any,
|
||||||
|
|
@ -764,7 +791,7 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="resultData.nationality"
|
v-model="informaData.nationality"
|
||||||
:label="dataLabel.nationality"
|
:label="dataLabel.nationality"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -774,12 +801,12 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="resultData.race"
|
v-model="informaData.ethnicity"
|
||||||
:label="dataLabel.race"
|
:label="dataLabel.race"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -790,7 +817,7 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.religionId"
|
v-model="informaData.religionId"
|
||||||
:options="Ops.religionOps"
|
:options="Ops.religionOps"
|
||||||
:label="dataLabel.religion"
|
:label="dataLabel.religion"
|
||||||
@filter="(inputValue: any,
|
@filter="(inputValue: any,
|
||||||
|
|
@ -799,7 +826,7 @@ onMounted(async () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -810,7 +837,7 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.bloodGroupId"
|
v-model="informaData.bloodId"
|
||||||
:options="Ops.bloodOps"
|
:options="Ops.bloodOps"
|
||||||
:label="dataLabel.bloodGroup"
|
:label="dataLabel.bloodGroup"
|
||||||
@filter="(inputValue: any,
|
@filter="(inputValue: any,
|
||||||
|
|
@ -825,7 +852,7 @@ onMounted(async () => {
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
mask="##########"
|
mask="##########"
|
||||||
v-model="resultData.telephoneNumber"
|
v-model="informaData.tel"
|
||||||
:label="dataLabel.telephoneNumber"
|
:label="dataLabel.telephoneNumber"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ const resultData = ref({
|
||||||
currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
|
currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
|
||||||
currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
|
currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
|
||||||
currentZipCode: "50100",
|
currentZipCode: "50100",
|
||||||
registrationSame: "1",
|
registrationSame: "0",
|
||||||
});
|
});
|
||||||
|
|
||||||
const dataLabel = {
|
const dataLabel = {
|
||||||
|
|
@ -262,6 +262,20 @@ function defaultAdd() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchData() {
|
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) {
|
// if (route.params.id) {
|
||||||
// // showLoader();
|
// // showLoader();
|
||||||
// await http
|
// await http
|
||||||
|
|
@ -464,13 +478,57 @@ async function fetchSubDistrict(id: string | null, position: string) {
|
||||||
} else isLoad.value++;
|
} 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() {
|
async function getNewData() {
|
||||||
await fetchData();
|
await fetchData();
|
||||||
await fetchProvince();
|
await fetchProvince();
|
||||||
await fetchDistrict(resultData.value.registrationProvinceId, "1");
|
await fetchDistrict(addressData.value.provinceId, "1");
|
||||||
await fetchDistrict(resultData.value.currentProvinceId, "2");
|
await fetchDistrict(addressData.value.provinceIdC, "2");
|
||||||
await fetchSubDistrict(resultData.value.registrationDistrictId, "1");
|
await fetchSubDistrict(addressData.value.districtId, "1");
|
||||||
await fetchSubDistrict(resultData.value.currentDistrictId, "2");
|
await fetchSubDistrict(addressData.value.districtIdC, "2");
|
||||||
}
|
}
|
||||||
|
|
||||||
function filterSelector(val: any, update: Function, refData: string) {
|
function filterSelector(val: any, update: Function, refData: string) {
|
||||||
|
|
@ -554,15 +612,14 @@ function onSubmit() {
|
||||||
myForm.value.validate().then(async (result: boolean) => {
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
if (result) {
|
if (result) {
|
||||||
// await saveData();
|
// await saveData();
|
||||||
console.log("Hello");
|
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await getNewData();
|
|
||||||
defaultAdd();
|
defaultAdd();
|
||||||
|
await getNewData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -587,7 +644,7 @@ onMounted(async () => {
|
||||||
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||||
<!-- column 1 -->
|
<!-- column 1 -->
|
||||||
<div class="col-md-6 col-12 row">
|
<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
|
<div
|
||||||
v-for="label in Object.keys(dataLabel).slice(0, 5)"
|
v-for="label in Object.keys(dataLabel).slice(0, 5)"
|
||||||
class="q-py-xs"
|
class="q-py-xs"
|
||||||
|
|
@ -596,16 +653,16 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- data -->
|
<!-- data -->
|
||||||
<div class="col-8">
|
<div class="col-7">
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.registrationAddress }}
|
{{ addressData.address }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.registrationProvinceId
|
addressData.provinceId
|
||||||
? (
|
? (
|
||||||
Ops.provinceOps.find(
|
Ops.provinceOps.find(
|
||||||
(r) => r.id === resultData.registrationProvinceId
|
(r) => r.id === addressData.provinceId
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
|
|
@ -613,10 +670,10 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.registrationDistrictId
|
addressData.districtId
|
||||||
? (
|
? (
|
||||||
Ops.districtOps.find(
|
Ops.districtOps.find(
|
||||||
(r) => r.id === resultData.registrationDistrictId
|
(r) => r.id === addressData.districtId
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
|
|
@ -624,17 +681,17 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.registrationSubDistrictId
|
addressData.subdistrictId
|
||||||
? (
|
? (
|
||||||
Ops.subdistrictOps.find(
|
Ops.subdistrictOps.find(
|
||||||
(r) => r.id === resultData.registrationSubDistrictId
|
(r) => r.id === addressData.subdistrictId
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.registrationZipCode }}
|
{{ addressData.codep }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -642,12 +699,12 @@ onMounted(async () => {
|
||||||
<!-- column 2 -->
|
<!-- column 2 -->
|
||||||
<div
|
<div
|
||||||
class="text-grey-6 text-weight-medium"
|
class="text-grey-6 text-weight-medium"
|
||||||
v-if="resultData.registrationSame === '1'"
|
v-if="addressData.same === '1'"
|
||||||
>
|
>
|
||||||
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
|
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 col-12 row" v-else>
|
<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
|
<div
|
||||||
v-for="label in Object.keys(dataLabel).slice(5, 10)"
|
v-for="label in Object.keys(dataLabel).slice(5, 10)"
|
||||||
class="q-py-xs"
|
class="q-py-xs"
|
||||||
|
|
@ -656,16 +713,16 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- data -->
|
<!-- data -->
|
||||||
<div class="col-8">
|
<div class="col-7">
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.currentAddress }}
|
{{ addressData.addressC }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.currentProvinceId
|
addressData.provinceIdC
|
||||||
? (
|
? (
|
||||||
Ops.provinceOps.find(
|
Ops.provinceOps.find(
|
||||||
(r) => r.id === resultData.currentProvinceId
|
(r) => r.id === addressData.provinceIdC
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
|
|
@ -673,10 +730,10 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.currentDistrictId
|
addressData.districtIdC
|
||||||
? (
|
? (
|
||||||
Ops.districtOps.find(
|
Ops.districtCOps.find(
|
||||||
(r) => r.id === resultData.currentDistrictId
|
(r) => r.id === addressData.districtIdC
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
|
|
@ -684,17 +741,17 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{
|
{{
|
||||||
resultData.currentSubDistrictId
|
addressData.subdistrictIdC
|
||||||
? (
|
? (
|
||||||
Ops.subdistrictOps.find(
|
Ops.subdistrictCOps.find(
|
||||||
(r) => r.id === resultData.currentSubDistrictId
|
(r) => r.id === addressData.subdistrictIdC
|
||||||
) || {}
|
) || {}
|
||||||
).name
|
).name
|
||||||
: "-"
|
: "-"
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-py-xs">
|
<div class="q-py-xs">
|
||||||
{{ resultData.registrationZipCode }}
|
{{ addressData.codec }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -719,14 +776,14 @@ onMounted(async () => {
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="textarea"
|
type="textarea"
|
||||||
v-model="resultData.registrationAddress"
|
v-model="addressData.address"
|
||||||
:label="dataLabel.registrationAddress"
|
:label="dataLabel.registrationAddress"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -737,17 +794,18 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.registrationProvinceId"
|
v-model="addressData.provinceId"
|
||||||
:options="Ops.provinceOps"
|
:options="Ops.provinceOps"
|
||||||
:label="dataLabel.registrationProvince"
|
:label="dataLabel.registrationProvince"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||||
|
@update:model-value="(value:string) => selectProvince(value, '1')"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
) "
|
) "
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -758,17 +816,18 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.registrationDistrictId"
|
v-model="addressData.districtId"
|
||||||
:options="Ops.districtOps"
|
:options="Ops.districtOps"
|
||||||
:label="dataLabel.registrationDistrict"
|
:label="dataLabel.registrationDistrict"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@update:model-value="(value:string) => selectDistrict(value, '1')"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
||||||
) "
|
) "
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -779,10 +838,11 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.registrationSubDistrictId"
|
v-model="addressData.subdistrictId"
|
||||||
:options="Ops.subdistrictOps"
|
:options="Ops.subdistrictOps"
|
||||||
:label="dataLabel.registrationSubDistrict"
|
:label="dataLabel.registrationSubDistrict"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
|
||||||
|
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
||||||
) "
|
) "
|
||||||
|
|
@ -795,7 +855,7 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="resultData.registrationZipCode"
|
v-model="addressData.codep"
|
||||||
:label="dataLabel.registrationZipCode"
|
:label="dataLabel.registrationZipCode"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -806,24 +866,24 @@ onMounted(async () => {
|
||||||
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
||||||
>
|
>
|
||||||
<q-radio
|
<q-radio
|
||||||
v-model="resultData.registrationSame"
|
dense
|
||||||
checked-icon="task_alt"
|
|
||||||
unchecked-icon="panorama_fish_eye"
|
|
||||||
val="1"
|
val="1"
|
||||||
label="ใช่"
|
label="ใช่"
|
||||||
dense
|
checked-icon="task_alt"
|
||||||
|
v-model="addressData.same"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
/>
|
/>
|
||||||
<q-radio
|
<q-radio
|
||||||
v-model="resultData.registrationSame"
|
dense
|
||||||
checked-icon="task_alt"
|
|
||||||
unchecked-icon="panorama_fish_eye"
|
|
||||||
val="0"
|
val="0"
|
||||||
label="ไม่"
|
label="ไม่"
|
||||||
dense
|
checked-icon="task_alt"
|
||||||
|
v-model="addressData.same"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- current address -->
|
<!-- current address -->
|
||||||
<div v-if="resultData.registrationSame === '0'">
|
<div v-if="addressData.same === '0'">
|
||||||
<div class="col-12 q-pb-xs">
|
<div class="col-12 q-pb-xs">
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
|
|
@ -831,14 +891,14 @@ onMounted(async () => {
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="textarea"
|
type="textarea"
|
||||||
v-model="resultData.currentAddress"
|
v-model="addressData.addressC"
|
||||||
:label="dataLabel.currentAddress"
|
:label="dataLabel.currentAddress"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -849,17 +909,18 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.currentProvinceId"
|
v-model="addressData.provinceIdC"
|
||||||
:options="Ops.provinceOps"
|
:options="Ops.provinceOps"
|
||||||
:label="dataLabel.currentProvince"
|
:label="dataLabel.currentProvince"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||||
|
@update:model-value="(value:string) => selectProvince(value, '2')"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
) "
|
) "
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -870,17 +931,18 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.currentDistrictId"
|
v-model="addressData.districtIdC"
|
||||||
:options="Ops.districtOps"
|
:options="Ops.districtCOps"
|
||||||
:label="dataLabel.currentDistrict"
|
:label="dataLabel.currentDistrict"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@update:model-value="(value:string) => selectDistrict(value, '2')"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
||||||
) "
|
) "
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<selector
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
use-input
|
use-input
|
||||||
|
|
@ -891,10 +953,11 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
input-debounce="0"
|
input-debounce="0"
|
||||||
v-model="resultData.currentSubDistrictId"
|
v-model="addressData.subdistrictIdC"
|
||||||
:options="Ops.subdistrictOps"
|
:options="Ops.subdistrictCOps"
|
||||||
:label="dataLabel.currentSubDistrict"
|
:label="dataLabel.currentSubDistrict"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
|
||||||
|
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
||||||
) "
|
) "
|
||||||
|
|
@ -907,7 +970,7 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="resultData.registrationZipCode"
|
v-model="addressData.codec"
|
||||||
:label="dataLabel.registrationZipCode"
|
:label="dataLabel.registrationZipCode"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -917,10 +980,10 @@ onMounted(async () => {
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<div class="text-right q-pa-sm">
|
<div class="text-right q-pa-sm">
|
||||||
<q-btn
|
<q-btn
|
||||||
id="onSubmit"
|
|
||||||
type="submit"
|
|
||||||
dense
|
dense
|
||||||
unelevated
|
unelevated
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
label="บันทึก"
|
label="บันทึก"
|
||||||
color="public"
|
color="public"
|
||||||
class="q-px-md"
|
class="q-px-md"
|
||||||
|
|
@ -933,14 +996,14 @@ onMounted(async () => {
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<HistoryTable
|
<HistoryTable
|
||||||
:rows="rowsHistory"
|
|
||||||
:columns="columnsHistory"
|
|
||||||
:filter="filterHistory"
|
|
||||||
:visible-columns="visibleColumnsHistory"
|
|
||||||
v-model:modal="modalHistory"
|
v-model:modal="modalHistory"
|
||||||
|
v-model:tittle="tittleHistory"
|
||||||
v-model:inputfilter="filterHistory"
|
v-model:inputfilter="filterHistory"
|
||||||
v-model:inputvisible="visibleColumnsHistory"
|
v-model:inputvisible="visibleColumnsHistory"
|
||||||
v-model:tittle="tittleHistory"
|
:rows="rowsHistory"
|
||||||
|
:filter="filterHistory"
|
||||||
|
:columns="columnsHistory"
|
||||||
|
:visible-columns="visibleColumnsHistory"
|
||||||
>
|
>
|
||||||
<template #columns="props">
|
<template #columns="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -327,7 +327,6 @@ watch(
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="toptitle col text-dark">ประวัติการศึกษา</div>
|
|
||||||
<q-toolbar style="padding: 0px">
|
<q-toolbar style="padding: 0px">
|
||||||
<q-btn
|
<q-btn
|
||||||
round
|
round
|
||||||
|
|
@ -341,6 +340,17 @@ watch(
|
||||||
>
|
>
|
||||||
|
|
||||||
<q-space />
|
<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
|
<q-select
|
||||||
v-if="mode === 'table'"
|
v-if="mode === 'table'"
|
||||||
v-model="visibleColumns"
|
v-model="visibleColumns"
|
||||||
|
|
@ -361,7 +371,7 @@ watch(
|
||||||
<q-btn-toggle
|
<q-btn-toggle
|
||||||
v-model="mode"
|
v-model="mode"
|
||||||
dense
|
dense
|
||||||
class="no-shadow"
|
class="no-shadow toggle-borderd"
|
||||||
toggle-color="grey-4"
|
toggle-color="grey-4"
|
||||||
:options="[
|
:options="[
|
||||||
{ value: 'table', slot: 'table' },
|
{ value: 'table', slot: 'table' },
|
||||||
|
|
@ -449,10 +459,10 @@ watch(
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:item="props" v-else>
|
<template v-slot:item="props" v-else>
|
||||||
<div
|
<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 bordered>
|
||||||
<q-card-actions align="right">
|
<q-card-actions align="right" class="bg-grey-3">
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
|
|
@ -474,28 +484,30 @@ watch(
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item
|
<div
|
||||||
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
|
class="q-pa-md"
|
||||||
|
v-for="(col, index) in props.cols"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
>
|
>
|
||||||
<q-item-section>
|
<div class="row">
|
||||||
<q-item-label>{{ col.label }}</q-item-label>
|
<div class="col-5">
|
||||||
</q-item-section>
|
<div>{{ col.label }}</div>
|
||||||
<q-item-section side>
|
</div>
|
||||||
<q-item-label
|
<div class="col-7">
|
||||||
caption
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
col.name === 'startDate' ||
|
col.name === 'startDate' ||
|
||||||
col.name === 'finishDate' ||
|
col.name === 'finishDate' ||
|
||||||
col.name === 'graduateDate'
|
col.name === 'graduateDate'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||||
</q-item-label>
|
</div>
|
||||||
|
|
||||||
<q-item-label caption v-else>{{ col.value }}</q-item-label>
|
<div v-else>{{ col.value }}</div>
|
||||||
</q-item-section>
|
</div>
|
||||||
</q-item>
|
</div>
|
||||||
|
</div>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -503,7 +515,7 @@ watch(
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
||||||
<q-dialog v-model="addDataDialog" class="dialog" persistent>
|
<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-form @submit.prevent greedy @validation-success="validateForm">
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
<q-card-section class="flex justify-between" style="padding: 0">
|
||||||
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
|
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
|
||||||
|
|
@ -511,26 +523,28 @@ watch(
|
||||||
<q-separator color="grey-4" />
|
<q-separator color="grey-4" />
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-card-section class="row q-gutter-sm">
|
<q-card-section class="row q-gutter-sm">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
v-model="educationData.level"
|
outlined
|
||||||
label="ระดับการศึกษา"
|
v-model="educationData.level"
|
||||||
bg-color="white"
|
label="ระดับการศึกษา"
|
||||||
class="col"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
<q-input
|
</div>
|
||||||
outlined
|
<div class="col">
|
||||||
v-model="educationData.institute"
|
<q-input
|
||||||
label="สถานศึกษา"
|
outlined
|
||||||
bg-color="white"
|
v-model="educationData.institute"
|
||||||
class="col"
|
label="สถานศึกษา"
|
||||||
dense
|
bg-color="white"
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
|
dense
|
||||||
hide-bottom-space
|
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
|
||||||
/>
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
|
<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">
|
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
|
||||||
|
|
@ -552,284 +566,303 @@ watch(
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isDate === 'false'" class="row q-gutter-sm">
|
<div v-if="isDate === 'false'" class="row q-gutter-sm">
|
||||||
<datepicker
|
<div class="col">
|
||||||
menu-class-name="modalfix"
|
<datepicker
|
||||||
v-model="educationData.startYear"
|
menu-class-name="modalfix"
|
||||||
:locale="'th'"
|
v-model="educationData.startYear"
|
||||||
autoApply
|
:locale="'th'"
|
||||||
class="col"
|
autoApply
|
||||||
year-picker
|
year-picker
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
@update:modelValue="educationData.startYear"
|
@update:modelValue="educationData.startYear"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<template #year-overlay-value="{ value }">{{
|
<template #year-overlay-value="{ value }">{{
|
||||||
parseInt(value + 543)
|
parseInt(value + 543)
|
||||||
}}</template>
|
}}</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
outlined
|
outlined
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="educationData.startYear + 543"
|
:model-value="educationData.startYear + 543"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
|
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
|
||||||
]"
|
]"
|
||||||
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
|
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon
|
<q-icon
|
||||||
name="event"
|
name="event"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
style="color: var(--q-primary)"
|
style="color: var(--q-primary)"
|
||||||
>
|
>
|
||||||
</q-icon>
|
</q-icon>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</datepicker>
|
</datepicker>
|
||||||
<datepicker
|
</div>
|
||||||
menu-class-name="modalfix"
|
<div class="col">
|
||||||
v-model="educationData.finishYear"
|
<datepicker
|
||||||
:locale="'th'"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
v-model="educationData.finishYear"
|
||||||
class="col"
|
:locale="'th'"
|
||||||
year-picker
|
autoApply
|
||||||
:enableTimePicker="false"
|
year-picker
|
||||||
@update:modelValue="educationData.finishYear"
|
:enableTimePicker="false"
|
||||||
>
|
@update:modelValue="educationData.finishYear"
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
>
|
||||||
<template #year-overlay-value="{ value }">{{
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
parseInt(value + 543)
|
<template #year-overlay-value="{ value }">{{
|
||||||
}}</template>
|
parseInt(value + 543)
|
||||||
<template #trigger>
|
}}</template>
|
||||||
<q-input
|
<template #trigger>
|
||||||
dense
|
<q-input
|
||||||
lazy-rules
|
dense
|
||||||
outlined
|
lazy-rules
|
||||||
hide-bottom-space
|
outlined
|
||||||
:model-value="educationData.finishYear + 543"
|
hide-bottom-space
|
||||||
:rules="[
|
:model-value="educationData.finishYear + 543"
|
||||||
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
|
:rules="[
|
||||||
]"
|
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
|
||||||
:label="`${'ปีที่จบการศึกษา'}`"
|
]"
|
||||||
>
|
:label="`${'ปีที่จบการศึกษา'}`"
|
||||||
<template v-slot:prepend>
|
>
|
||||||
<q-icon
|
<template v-slot:prepend>
|
||||||
name="event"
|
<q-icon
|
||||||
class="cursor-pointer"
|
name="event"
|
||||||
style="color: var(--q-primary)"
|
class="cursor-pointer"
|
||||||
>
|
style="color: var(--q-primary)"
|
||||||
</q-icon>
|
>
|
||||||
</template>
|
</q-icon>
|
||||||
</q-input>
|
</template>
|
||||||
</template>
|
</q-input>
|
||||||
</datepicker>
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isDate === 'true'" class="row q-gutter-sm">
|
<div v-if="isDate === 'true'" class="row q-gutter-sm">
|
||||||
<datepicker
|
<div class="col">
|
||||||
class="col"
|
<datepicker
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="educationData.startDate"
|
v-model="educationData.startDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<template #year-overlay-value="{ value }">{{
|
<template #year-overlay-value="{ value }">{{
|
||||||
parseInt(value + 543)
|
parseInt(value + 543)
|
||||||
}}</template>
|
}}</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:model-value="date2Thai(educationData.startDate)"
|
:model-value="date2Thai(educationData.startDate)"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
|
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
|
||||||
]"
|
]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
|
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon
|
<q-icon
|
||||||
name="event"
|
name="event"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
color="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
</q-icon>
|
</q-icon>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</datepicker>
|
</datepicker>
|
||||||
<datepicker
|
</div>
|
||||||
menu-class-name="modalfix"
|
<div class="col">
|
||||||
v-model="educationData.finishDate"
|
<datepicker
|
||||||
:locale="'th'"
|
menu-class-name="modalfix"
|
||||||
class="col"
|
v-model="educationData.finishDate"
|
||||||
autoApply
|
:locale="'th'"
|
||||||
:enableTimePicker="false"
|
autoApply
|
||||||
week-start="0"
|
:enableTimePicker="false"
|
||||||
>
|
week-start="0"
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
>
|
||||||
<template #year-overlay-value="{ value }">{{
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
parseInt(value + 543)
|
<template #year-overlay-value="{ value }">{{
|
||||||
}}</template>
|
parseInt(value + 543)
|
||||||
<template #trigger>
|
}}</template>
|
||||||
<q-input
|
<template #trigger>
|
||||||
outlined
|
<q-input
|
||||||
dense
|
outlined
|
||||||
lazy-rules
|
dense
|
||||||
:model-value="date2Thai(educationData.finishDate)"
|
lazy-rules
|
||||||
:rules="[
|
:model-value="date2Thai(educationData.finishDate)"
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
|
:rules="[
|
||||||
]"
|
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
|
||||||
hide-bottom-space
|
]"
|
||||||
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
|
hide-bottom-space
|
||||||
>
|
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
|
||||||
<template v-slot:prepend>
|
>
|
||||||
<q-icon
|
<template v-slot:prepend>
|
||||||
name="event"
|
<q-icon
|
||||||
class="cursor-pointer"
|
name="event"
|
||||||
color="primary"
|
class="cursor-pointer"
|
||||||
>
|
color="primary"
|
||||||
</q-icon>
|
>
|
||||||
</template>
|
</q-icon>
|
||||||
</q-input>
|
</template>
|
||||||
</template>
|
</q-input>
|
||||||
</datepicker>
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
<q-card-section class="row q-gutter-sm q-pt-sm">
|
<q-card-section class="row q-gutter-sm q-pt-sm">
|
||||||
<datepicker
|
<div class="col">
|
||||||
menu-class-name="modalfix"
|
<datepicker
|
||||||
v-model="educationData.graduateDate"
|
menu-class-name="modalfix"
|
||||||
:locale="'th'"
|
v-model="educationData.graduateDate"
|
||||||
class="col"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<template #year-overlay-value="{ value }">{{
|
<template #year-overlay-value="{ value }">{{
|
||||||
parseInt(value + 543)
|
parseInt(value + 543)
|
||||||
}}</template>
|
}}</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:model-value="date2Thai(educationData.graduateDate)"
|
:model-value="date2Thai(educationData.graduateDate)"
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วันที่ได้รับ'}`"
|
:label="`${'วันที่ได้รับ'}`"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
<q-icon
|
||||||
</q-icon>
|
name="event"
|
||||||
</template>
|
class="cursor-pointer"
|
||||||
</q-input>
|
color="primary"
|
||||||
</template>
|
>
|
||||||
</datepicker>
|
</q-icon>
|
||||||
<q-select
|
</template>
|
||||||
outlined
|
</q-input>
|
||||||
dense
|
</template>
|
||||||
bg-color="white"
|
</datepicker>
|
||||||
class="col"
|
</div>
|
||||||
v-model="educationData.isEducation"
|
<div class="col">
|
||||||
:options="educationOption"
|
<q-select
|
||||||
label="เป็นวุฒิการศึกษาในตำแหน่ง"
|
outlined
|
||||||
/>
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
v-model="educationData.isEducation"
|
||||||
|
:options="educationOption"
|
||||||
|
label="เป็นวุฒิการศึกษาในตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section class="row q-gutter-sm q-py-none">
|
<q-card-section class="row q-gutter-sm q-py-none">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
v-model="educationData.degree"
|
outlined
|
||||||
label="วุฒิการศึกษา"
|
v-model="educationData.degree"
|
||||||
bg-color="white"
|
label="วุฒิการศึกษา"
|
||||||
class="col"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
<q-input
|
</div>
|
||||||
outlined
|
<div class="col">
|
||||||
v-model="educationData.field"
|
<q-input
|
||||||
label="สาขาวิชา/ทาง"
|
outlined
|
||||||
bg-color="white"
|
v-model="educationData.field"
|
||||||
class="col"
|
label="สาขาวิชา/ทาง"
|
||||||
dense
|
bg-color="white"
|
||||||
/>
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
v-model="educationData.fundName"
|
outlined
|
||||||
label="ทุน"
|
v-model="educationData.fundName"
|
||||||
bg-color="white"
|
label="ทุน"
|
||||||
class="col"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
/>
|
/>
|
||||||
<q-input
|
</div>
|
||||||
outlined
|
<div class="col">
|
||||||
v-model="educationData.gpa"
|
<q-input
|
||||||
label="เกรดเฉลี่ย"
|
outlined
|
||||||
bg-color="white"
|
v-model="educationData.gpa"
|
||||||
class="col"
|
label="เกรดเฉลี่ย"
|
||||||
dense
|
bg-color="white"
|
||||||
mask="#.##"
|
dense
|
||||||
/>
|
mask="#.##"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
v-model="educationData.country"
|
outlined
|
||||||
label="ประเทศ"
|
v-model="educationData.country"
|
||||||
bg-color="white"
|
label="ประเทศ"
|
||||||
class="col"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
/>
|
/>
|
||||||
<q-input
|
</div>
|
||||||
outlined
|
<div class="col">
|
||||||
v-model="educationData.other"
|
<q-input
|
||||||
label="ข้อมูลติดต่อ"
|
outlined
|
||||||
bg-color="white"
|
v-model="educationData.other"
|
||||||
class="col"
|
label="ข้อมูลติดต่อ"
|
||||||
dense
|
bg-color="white"
|
||||||
/>
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
v-model="educationData.duration"
|
outlined
|
||||||
label="ระยะเวลา"
|
v-model="educationData.duration"
|
||||||
bg-color="white"
|
label="ระยะเวลา"
|
||||||
class="col"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
/>
|
/>
|
||||||
<q-input
|
</div>
|
||||||
outlined
|
<div class="col">
|
||||||
v-model="educationData.durationYear"
|
<q-input
|
||||||
label="ระยะเวลาหลักสูตร"
|
outlined
|
||||||
bg-color="white"
|
v-model="educationData.durationYear"
|
||||||
class="col"
|
label="ระยะเวลาหลักสูตร"
|
||||||
type="number"
|
bg-color="white"
|
||||||
dense
|
type="number"
|
||||||
/>
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section class="row q-gutter-sm q-pt-sm">
|
<q-card-section class="row q-gutter-sm q-pt-sm">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
v-model="educationData.note"
|
outlined
|
||||||
label="หมายเหตุ"
|
v-model="educationData.note"
|
||||||
bg-color="white"
|
label="หมายเหตุ"
|
||||||
class="col"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
type="textarea"
|
type="textarea"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</div>
|
</div>
|
||||||
<q-card-actions align="right">
|
<q-card-actions align="right">
|
||||||
|
|
@ -850,7 +883,7 @@ watch(
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<q-dialog v-model="historyDialog" class="dialog" persistent>
|
<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-form @submit.prevent greedy @validation-success="validateForm">
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
<q-card-section class="flex justify-between" style="padding: 0">
|
||||||
<dialog-header
|
<dialog-header
|
||||||
|
|
|
||||||
|
|
@ -60,26 +60,26 @@ const historyDialog = ref<boolean>(false);
|
||||||
const rows = [
|
const rows = [
|
||||||
{
|
{
|
||||||
field: "กีต้าร์",
|
field: "กีต้าร์",
|
||||||
detail: "ตะแน่วๆ",
|
detail: "จับคอร์ดได้",
|
||||||
remark: "เล่นดีมาก",
|
remark: "เล่นดีมาก",
|
||||||
reference: "อ้างอิง",
|
reference: "อ้างอิง",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "ว่ายน้ำ",
|
field: "ว่ายน้ำ",
|
||||||
detail: "ตะแน่วๆ",
|
detail: "ดำน้ำนาน 5 นาที",
|
||||||
remark: "เล่นดีมาก",
|
remark: "ว่ายน้ำเก่งมาก",
|
||||||
reference: "อ้างอิง",
|
reference: "อ้างอิง",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "กีฬา",
|
field: "กีฬา",
|
||||||
detail: "ตะแน่วๆ",
|
detail: "จับคอร์ดได้",
|
||||||
remark: "เล่นดีมาก",
|
remark: "เล่นดีมาก",
|
||||||
reference: "อ้างอิง",
|
reference: "อ้างอิง",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "การเรียน",
|
field: "การเรียน",
|
||||||
detail: "ตะแน่วๆ",
|
detail: "เรียนเก่งมาก",
|
||||||
remark: "เล่นดีมาก",
|
remark: "ตั้งใจเรียนมาก",
|
||||||
reference: "อ้างอิง",
|
reference: "อ้างอิง",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
@ -133,11 +133,6 @@ async function onSubmit() {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<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-toolbar style="padding: 0px" class="text-primary">
|
||||||
<q-btn flat round dense icon="add" @click="() => (dialog = true)">
|
<q-btn flat round dense icon="add" @click="() => (dialog = true)">
|
||||||
<q-tooltip>เพิ่ม</q-tooltip>
|
<q-tooltip>เพิ่ม</q-tooltip>
|
||||||
|
|
@ -145,7 +140,6 @@ async function onSubmit() {
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
v-if="mode === 'table'"
|
|
||||||
outlined
|
outlined
|
||||||
v-model="formFilter.keyword"
|
v-model="formFilter.keyword"
|
||||||
label="ค้นหา"
|
label="ค้นหา"
|
||||||
|
|
@ -175,7 +169,7 @@ async function onSubmit() {
|
||||||
<q-btn-toggle
|
<q-btn-toggle
|
||||||
v-model="mode"
|
v-model="mode"
|
||||||
dense
|
dense
|
||||||
class="no-shadow"
|
class="no-shadow toggle-borderd"
|
||||||
toggle-color="grey-4"
|
toggle-color="grey-4"
|
||||||
:options="[
|
:options="[
|
||||||
{ value: 'table', slot: 'table' },
|
{ value: 'table', slot: 'table' },
|
||||||
|
|
@ -263,9 +257,10 @@ async function onSubmit() {
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
|
class="no-shadow toggle-borderd"
|
||||||
round
|
round
|
||||||
color="blue"
|
color="blue"
|
||||||
icon="history"
|
icon="mdi-history"
|
||||||
@click="historyDialog = true"
|
@click="historyDialog = true"
|
||||||
>
|
>
|
||||||
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
|
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
|
||||||
|
|
@ -288,7 +283,7 @@ async function onSubmit() {
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
||||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
<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-form @submit.prevent greedy @validation-success="validateForm">
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
<q-card-section class="flex justify-between" style="padding: 0">
|
||||||
<dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
|
<dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
|
||||||
|
|
@ -296,26 +291,28 @@ async function onSubmit() {
|
||||||
<q-separator color="grey-4" />
|
<q-separator color="grey-4" />
|
||||||
<q-card-section class="col q-gutter-sm q-pr-md">
|
<q-card-section class="col q-gutter-sm q-pr-md">
|
||||||
<div class="row q-gutter-sm q-ml-none">
|
<div class="row q-gutter-sm q-ml-none">
|
||||||
<q-input
|
<div class="col">
|
||||||
outlined
|
<q-input
|
||||||
class="col"
|
outlined
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
v-model="specialSkill.field"
|
v-model="specialSkill.field"
|
||||||
label="ด้าน"
|
label="ด้าน"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
|
||||||
/>
|
/>
|
||||||
<q-input
|
</div>
|
||||||
outlined
|
<div class="col">
|
||||||
class="col"
|
<q-input
|
||||||
dense
|
outlined
|
||||||
bg-color="white"
|
dense
|
||||||
v-model="specialSkill.detail"
|
bg-color="white"
|
||||||
label="รายละเอียด"
|
v-model="specialSkill.detail"
|
||||||
hide-bottom-space
|
label="รายละเอียด"
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
hide-bottom-space
|
||||||
/>
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -352,7 +349,7 @@ async function onSubmit() {
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<q-dialog v-model="historyDialog" class="dialog" persistent>
|
<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-form @submit.prevent greedy @validation-success="validateForm">
|
||||||
<q-card-section class="flex justify-between" style="padding: 0">
|
<q-card-section class="flex justify-between" style="padding: 0">
|
||||||
<dialog-header
|
<dialog-header
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,26 @@ interface InformationOps {
|
||||||
employeeTypeOps: DataOption[];
|
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 {
|
interface AddressOps {
|
||||||
provinceOps: DataOption[];
|
provinceOps: DataOption[];
|
||||||
districtOps: DataOption[];
|
districtOps: DataOption[];
|
||||||
|
|
@ -50,6 +70,26 @@ interface Address {
|
||||||
codep: string | null;
|
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 = {
|
const defaultAddress: Address = {
|
||||||
address: null,
|
address: null,
|
||||||
provinceId: null,
|
provinceId: null,
|
||||||
|
|
@ -63,13 +103,15 @@ const defaultAddress: Address = {
|
||||||
codep: null,
|
codep: null,
|
||||||
same: "0",
|
same: "0",
|
||||||
};
|
};
|
||||||
export { defaultAddress };
|
|
||||||
|
export { defaultAddress, defaultInformation };
|
||||||
export type {
|
export type {
|
||||||
Pagination,
|
Pagination,
|
||||||
DataOption,
|
DataOption,
|
||||||
DataOption2,
|
DataOption2,
|
||||||
zipCodeOption,
|
zipCodeOption,
|
||||||
InformationOps,
|
InformationOps,
|
||||||
|
Information,
|
||||||
AddressOps,
|
AddressOps,
|
||||||
Address,
|
Address,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
interface ProfesLicenseObject {
|
||||||
|
certificateType: string;
|
||||||
|
issuer: string;
|
||||||
|
certificateNo: string;
|
||||||
|
issueDate: Date;
|
||||||
|
expireDate: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { ProfesLicenseObject };
|
||||||
|
|
@ -39,6 +39,12 @@ const itemsMenu = ref<DataOption[]>([
|
||||||
name: "อื่นๆ",
|
name: "อื่นๆ",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.type = "file";
|
||||||
|
|
||||||
|
function selectFile() {
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
|
||||||
function fetchDataPersonal() {
|
function fetchDataPersonal() {
|
||||||
const data = {
|
const data = {
|
||||||
|
|
@ -148,7 +154,9 @@ onMounted(() => {
|
||||||
text-color="primary"
|
text-color="primary"
|
||||||
icon="mdi-pencil-outline"
|
icon="mdi-pencil-outline"
|
||||||
style="position: absolute; bottom: 0; right: 0"
|
style="position: absolute; bottom: 0; right: 0"
|
||||||
/>
|
@click="selectFile"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col row items-center bg-teal-1">
|
<div class="col row items-center bg-teal-1">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, reactive, watch } from "vue";
|
import { ref, reactive, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
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 { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
|
||||||
import type { FormDataChar } from "@/modules/13_salary/interface/request/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({
|
const props = defineProps({
|
||||||
isStatusEdit: { type: Boolean, required: true },
|
isStatusEdit: { type: Boolean, required: true },
|
||||||
data: { type: Object, required: true },
|
data: { type: Object, required: true },
|
||||||
|
fetchData: {
|
||||||
|
type: Function,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const formData = reactive<FormDataChar>({
|
const formData = reactive<FormDataChar>({
|
||||||
name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
|
name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
|
||||||
|
|
@ -43,6 +49,29 @@ const ObjectRef: ObjectCharRef = {
|
||||||
group: groupRef,
|
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);
|
const isReadonly = ref<boolean>(false);
|
||||||
function onClickSubmit() {
|
function onClickSubmit() {
|
||||||
const hasError = [];
|
const hasError = [];
|
||||||
|
|
@ -62,8 +91,21 @@ function onClickSubmit() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSubmit() {
|
async function onSubmit() {
|
||||||
console.log(props.isStatusEdit);
|
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() {
|
function closeDialog() {
|
||||||
|
|
@ -94,16 +136,7 @@ watch(
|
||||||
() => modal.value,
|
() => modal.value,
|
||||||
() => {
|
() => {
|
||||||
if (modal.value && props.isStatusEdit) {
|
if (modal.value && props.isStatusEdit) {
|
||||||
console.log(props.data);
|
fetchSalaryDetail(props.data.id);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
@ -112,7 +145,14 @@ watch(
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card class="col-12" style="width: 80%">
|
<q-card class="col-12" style="width: 80%">
|
||||||
<form @submit.prevent.stop="onClickSubmit">
|
<form @submit.prevent.stop="onClickSubmit">
|
||||||
<Header tittle="test" :close="closeDialog" />
|
<Header
|
||||||
|
:tittle="
|
||||||
|
props.isStatusEdit
|
||||||
|
? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
|
||||||
|
: 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
|
||||||
|
"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-card-section class="scroll" style="max-height: 70vh">
|
<q-card-section class="scroll" style="max-height: 70vh">
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
|
@ -310,7 +350,12 @@ watch(
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<div class="text-right q-ma-sm">
|
<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-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, reactive, watch } from "vue";
|
import { ref, reactive, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
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";
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
|
@ -22,7 +23,7 @@ const {
|
||||||
success,
|
success,
|
||||||
} = useCounterMixin();
|
} = 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 modal = defineModel<boolean>("modal", { required: true });
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -34,6 +35,10 @@ const props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
defult: [],
|
defult: [],
|
||||||
},
|
},
|
||||||
|
fetchData: {
|
||||||
|
type: Function,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const formData = reactive<any>({
|
const formData = reactive<any>({
|
||||||
|
|
@ -47,7 +52,7 @@ const salaryNoRef = ref<Object | null>(null);
|
||||||
const salaryMonthRef = ref<Object | null>(null);
|
const salaryMonthRef = ref<Object | null>(null);
|
||||||
const salaryDayRef = ref<Object | null>(null);
|
const salaryDayRef = ref<Object | null>(null);
|
||||||
|
|
||||||
const ObjectRef: any = {
|
const ObjectRef: ObjectReteRef = {
|
||||||
salaryNo: salaryNoRef,
|
salaryNo: salaryNoRef,
|
||||||
salaryMonth: salaryMonthRef,
|
salaryMonth: salaryMonthRef,
|
||||||
salaryDay: salaryDayRef,
|
salaryDay: salaryDayRef,
|
||||||
|
|
@ -65,7 +70,6 @@ function clearFormData() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function onClickSubmit() {
|
function onClickSubmit() {
|
||||||
console.log(formData.salaryHalfSpecial);
|
|
||||||
const hasError = [];
|
const hasError = [];
|
||||||
for (const key in ObjectRef) {
|
for (const key in ObjectRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
|
||||||
|
|
@ -82,30 +86,57 @@ function onClickSubmit() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
dialogConfirm($q, () => {
|
dialogConfirm($q, async () => {
|
||||||
closeDialog();
|
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(
|
watch(
|
||||||
// () => modal.value,
|
() => modal.value,
|
||||||
// () => {
|
() => {
|
||||||
// if (modal.value && props.typeAction === "edit") {
|
if (modal.value && props.isStatusEdit) {
|
||||||
// if (props.data) {
|
if (props.data) {
|
||||||
// const data = props.data;
|
const data = props.data;
|
||||||
// formData.salaryId = data.id;
|
console.log(data);
|
||||||
// formData.salary = data.salary;
|
formData.salaryNo = data.step;
|
||||||
// formData.salaryHalf = data.salaryHalf;
|
formData.salaryMonth = data.salaryMonth;
|
||||||
// formData.salaryHalfSpecial = data.salaryHalfSpecial;
|
formData.salaryDay = data.salaryDay;
|
||||||
// formData.salaryFull = data.salaryFull;
|
}
|
||||||
// formData.salaryFullSpecial = data.salaryFullSpecial;
|
}
|
||||||
// formData.salaryFullHalf = data.salaryFullHalf;
|
}
|
||||||
// formData.salaryFullHalfSpecial = data.salaryFullHalfSpecial;
|
);
|
||||||
// formData.isNext = data.isNext;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,22 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { ref, reactive, onMounted, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
/** importType*/
|
/** importType*/
|
||||||
import type { QTableProps } from "quasar";
|
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*/
|
/** importComponents*/
|
||||||
import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
|
import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
|
||||||
|
import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
|
||||||
|
|
||||||
/** importStore*/
|
/** importStore*/
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
@ -25,11 +33,12 @@ const {
|
||||||
success,
|
success,
|
||||||
} = useCounterMixin();
|
} = useCounterMixin();
|
||||||
|
|
||||||
const formFilter = reactive({
|
const formFilter = reactive<FormFilter>({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
keyword: "",
|
keyword: "",
|
||||||
});
|
});
|
||||||
|
const maxPage = ref<number>(1);
|
||||||
|
|
||||||
/** ข้อมูล Table*/
|
/** ข้อมูล Table*/
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
|
@ -70,27 +79,9 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const rows = ref<any>([
|
const rows = ref<EmployeeSalary[]>([]);
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
|
|
||||||
group: 1,
|
|
||||||
date: new Date(),
|
|
||||||
isActive: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
|
|
||||||
group: 2,
|
|
||||||
date: new Date(),
|
|
||||||
isActive: false,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
|
const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
|
||||||
const pagination = ref({
|
|
||||||
page: formFilter.page,
|
|
||||||
rowsPerPage: formFilter.pageSize,
|
|
||||||
});
|
|
||||||
/** List Mune*/
|
/** List Mune*/
|
||||||
const itemMenu = ref<ItemsMenu[]>([
|
const itemMenu = ref<ItemsMenu[]>([
|
||||||
{
|
{
|
||||||
|
|
@ -106,7 +97,7 @@ const itemMenu = ref<ItemsMenu[]>([
|
||||||
type: "upload",
|
type: "upload",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "อัตราเงินเดือน",
|
label: "อัตราค่าจ้าง",
|
||||||
icon: "mdi-format-list-bulleted-triangle",
|
icon: "mdi-format-list-bulleted-triangle",
|
||||||
color: "secondary",
|
color: "secondary",
|
||||||
type: "salaryRate",
|
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) {
|
switch (type) {
|
||||||
case "edit":
|
case "edit":
|
||||||
onEdit(data);
|
onEdit(data);
|
||||||
break;
|
break;
|
||||||
case "upload":
|
case "upload":
|
||||||
onUpload();
|
onUpload(data.id, data.isActive);
|
||||||
break;
|
break;
|
||||||
case "salaryRate":
|
case "salaryRate":
|
||||||
onSalaryRate(data.id);
|
onSalaryRate(data.id);
|
||||||
break;
|
break;
|
||||||
case "coppy":
|
case "copy":
|
||||||
onCoppy(data.id);
|
onCoppy(data.id);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
|
@ -139,30 +149,83 @@ function onClickAction(type: string, data: any) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEdit(data: any) {
|
function onEdit(data: EmployeeSalary) {
|
||||||
modalDialogEmployeeChart.value = true;
|
modalDialogEmployeeChart.value = true;
|
||||||
isStatusEdit.value = true;
|
isStatusEdit.value = true;
|
||||||
dataRow.value = data;
|
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) {
|
function onSalaryRate(id: string) {
|
||||||
router.push(`/salary-employee/rate/${id}`);
|
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) {
|
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 modalDialogEmployeeChart = ref<boolean>(false);
|
||||||
const isStatusEdit = ref<boolean>(false);
|
const isStatusEdit = ref<boolean>(false);
|
||||||
const dataRow = ref<any>();
|
const dataRow = ref<EmployeeSalary>();
|
||||||
function onClickAdd() {
|
function onClickAdd() {
|
||||||
modalDialogEmployeeChart.value = true;
|
modalDialogEmployeeChart.value = true;
|
||||||
isStatusEdit.value = false;
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-toolbar class="text-primary" style="padding: 0px">
|
<q-toolbar class="text-primary" style="padding: 0px">
|
||||||
|
|
@ -173,10 +236,10 @@ function onClickAdd() {
|
||||||
<q-input
|
<q-input
|
||||||
borderless
|
borderless
|
||||||
dense
|
dense
|
||||||
debounce="300"
|
|
||||||
outlined
|
outlined
|
||||||
v-model="formFilter.keyword"
|
v-model="formFilter.keyword"
|
||||||
placeholder="ค้นหา"
|
placeholder="ค้นหา"
|
||||||
|
@keydown.enter.pervrnt="filterFn"
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<template v-slot:append>
|
||||||
<q-icon name="search" />
|
<q-icon name="search" />
|
||||||
|
|
@ -206,9 +269,9 @@ function onClickAdd() {
|
||||||
:rows="rows"
|
:rows="rows"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
row-key="name"
|
row-key="name"
|
||||||
v-model:pagination="pagination"
|
|
||||||
:rows-per-page-options="[10, 20, 50, 100]"
|
:rows-per-page-options="[10, 20, 50, 100]"
|
||||||
:visible-columns="visibleColumns"
|
:visible-columns="visibleColumns"
|
||||||
|
@update:pagination="updatePageSize"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
|
|
@ -290,11 +353,12 @@ function onClickAdd() {
|
||||||
v-model="formFilter.page"
|
v-model="formFilter.page"
|
||||||
active-color="primary"
|
active-color="primary"
|
||||||
color="dark"
|
color="dark"
|
||||||
:max="1"
|
:max="maxPage"
|
||||||
:max-pages="5"
|
:max-pages="5"
|
||||||
size="sm"
|
size="sm"
|
||||||
boundary-links
|
boundary-links
|
||||||
direction-links
|
direction-links
|
||||||
|
@update:model-value="updatePage"
|
||||||
></q-pagination>
|
></q-pagination>
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
@ -302,7 +366,14 @@ function onClickAdd() {
|
||||||
<DialogEmployeeChart
|
<DialogEmployeeChart
|
||||||
v-model:modal="modalDialogEmployeeChart"
|
v-model:modal="modalDialogEmployeeChart"
|
||||||
:isStatusEdit="isStatusEdit"
|
:isStatusEdit="isStatusEdit"
|
||||||
:data="dataRow"
|
:data="dataRow as EmployeeSalary"
|
||||||
|
:fetchData="fetchListChart"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DialogEmployeeUpload
|
||||||
|
v-model:modal="modalDialogUpload"
|
||||||
|
:id="salaryChartId"
|
||||||
|
:isActive="isActive"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,12 @@ interface ObjectCharRef {
|
||||||
|
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
export type { ObjectCharRef };
|
|
||||||
|
interface ObjectReteRef {
|
||||||
|
salaryNo: object | null;
|
||||||
|
salaryMonth: object | null;
|
||||||
|
salaryDay: object | null;
|
||||||
|
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
export type { ObjectCharRef, ObjectReteRef };
|
||||||
|
|
|
||||||
|
|
@ -7,4 +7,18 @@ interface FormDataChar {
|
||||||
endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
|
endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
|
||||||
details: string; //คำอธิบาย
|
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 };
|
||||||
|
|
|
||||||
|
|
@ -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 };
|
||||||
|
|
@ -1,11 +1,18 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { ref, reactive, onMounted, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
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*/
|
/** importType*/
|
||||||
import type { QTableProps } from "quasar";
|
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*/
|
/** importComponts*/
|
||||||
import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
|
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";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
/** use*/
|
/** use*/
|
||||||
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||||
useCounterMixin();
|
useCounterMixin();
|
||||||
|
|
||||||
|
const salaryEmployeeId = ref<string>(route.params.id.toString());
|
||||||
|
|
||||||
/** ข้อมูล Table*/
|
/** ข้อมูล Table*/
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "step",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ลำดับขั้น",
|
label: "ลำดับขั้น",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "no",
|
field: "step",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "month",
|
name: "salaryMonth",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
|
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "month",
|
field: "salaryMonth",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "day",
|
name: "salaryDay",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
|
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "day",
|
field: "salaryDay",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const rows = ref<any>([
|
const rows = ref<EmployeeRateSalary[]>([]);
|
||||||
{
|
const visibleColumns = ref<string[]>(["step", "salaryMonth", "salaryDay"]);
|
||||||
no: "1",
|
|
||||||
month: 100000,
|
|
||||||
day: 5000,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const visibleColumns = ref<string[]>(["no", "month", "day"]);
|
|
||||||
|
|
||||||
/** List Mune*/
|
/** List Mune*/
|
||||||
const itemMenu = ref<ItemsMenu[]>([
|
const itemMenu = ref<ItemsMenu[]>([
|
||||||
|
|
@ -75,26 +79,48 @@ const itemMenu = ref<ItemsMenu[]>([
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const formFilter = reactive({
|
const formFilter = reactive<FormFilter>({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
keyword: "",
|
keyword: "",
|
||||||
});
|
});
|
||||||
|
const maxPage = ref<number>(1);
|
||||||
|
|
||||||
const pagination = ref({
|
const pagination = ref({
|
||||||
page: formFilter.page,
|
page: formFilter.page,
|
||||||
rowsPerPage: formFilter.pageSize,
|
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 modalDialogEmployeeRate = ref<boolean>(false);
|
||||||
const isStatusEdit = 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) {
|
switch (type) {
|
||||||
case "edit":
|
case "edit":
|
||||||
onEdit();
|
onEdit(data);
|
||||||
break;
|
break;
|
||||||
case "delete":
|
case "delete":
|
||||||
onDelete();
|
onDelete(data.id);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
|
|
@ -102,19 +128,58 @@ function onClickAction(type: string, data: any) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEdit() {
|
function onEdit(data: EmployeeRateSalary) {
|
||||||
modalDialogEmployeeRate.value = true;
|
modalDialogEmployeeRate.value = true;
|
||||||
isStatusEdit.value = true;
|
isStatusEdit.value = true;
|
||||||
|
dataRow.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDelete() {
|
function onDelete(id: string) {
|
||||||
dialogRemove($q, () => {});
|
dialogRemove($q, () => {
|
||||||
|
http
|
||||||
|
.delete(config.API.salaryEmployeeRateListByid(id))
|
||||||
|
.then(() => {
|
||||||
|
fetchSalalyEmployeeRate();
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onClickAdd() {
|
function onClickAdd() {
|
||||||
modalDialogEmployeeRate.value = true;
|
modalDialogEmployeeRate.value = true;
|
||||||
isStatusEdit.value = false;
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="row items-center">
|
<div class="row items-center">
|
||||||
|
|
@ -141,9 +206,9 @@ function onClickAdd() {
|
||||||
<q-input
|
<q-input
|
||||||
borderless
|
borderless
|
||||||
dense
|
dense
|
||||||
debounce="300"
|
|
||||||
outlined
|
outlined
|
||||||
v-model="formFilter.keyword"
|
v-model="formFilter.keyword"
|
||||||
|
@keydown.enter.pervrnt="filterFn"
|
||||||
placeholder="ค้นหา"
|
placeholder="ค้นหา"
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<template v-slot:append>
|
||||||
|
|
@ -175,9 +240,9 @@ function onClickAdd() {
|
||||||
:rows="rows"
|
:rows="rows"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
row-key="name"
|
row-key="name"
|
||||||
v-model:pagination="pagination"
|
|
||||||
:rows-per-page-options="[10, 20, 50, 100]"
|
:rows-per-page-options="[10, 20, 50, 100]"
|
||||||
:visible-columns="visibleColumns"
|
:visible-columns="visibleColumns"
|
||||||
|
@update:pagination="updatePageSize"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
|
|
@ -191,10 +256,10 @@ function onClickAdd() {
|
||||||
<template v-slot:body="props">
|
<template v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
<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() : "-" }}
|
{{ col.value ? col.value.toLocaleString() : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name === 'day'">
|
<div v-else-if="col.name === 'salaryDay'">
|
||||||
{{ col.value ? col.value.toLocaleString() : "-" }}
|
{{ col.value ? col.value.toLocaleString() : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>{{ col.value ? col.value : "-" }}</div>
|
<div v-else>{{ col.value ? col.value : "-" }}</div>
|
||||||
|
|
@ -239,11 +304,12 @@ function onClickAdd() {
|
||||||
v-model="formFilter.page"
|
v-model="formFilter.page"
|
||||||
active-color="primary"
|
active-color="primary"
|
||||||
color="dark"
|
color="dark"
|
||||||
:max="1"
|
:max="maxPage"
|
||||||
:max-pages="5"
|
:max-pages="5"
|
||||||
size="sm"
|
size="sm"
|
||||||
boundary-links
|
boundary-links
|
||||||
direction-links
|
direction-links
|
||||||
|
@update:model-value="updatePage"
|
||||||
></q-pagination>
|
></q-pagination>
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
@ -253,6 +319,8 @@ function onClickAdd() {
|
||||||
<DialogEmployeeRate
|
<DialogEmployeeRate
|
||||||
v-model:modal="modalDialogEmployeeRate"
|
v-model:modal="modalDialogEmployeeRate"
|
||||||
:isStatusEdit="isStatusEdit"
|
:isStatusEdit="isStatusEdit"
|
||||||
|
:fetchData="fetchSalalyEmployeeRate"
|
||||||
|
:data="dataRow as EmployeeRateSalary"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue