Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
fd832c2d40
24 changed files with 2858 additions and 580 deletions
6
src/interface/main.ts
Normal file
6
src/interface/main.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
interface DataOption {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export type { DataOption };
|
||||
|
|
@ -32,17 +32,17 @@ const columns = [
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
// {
|
||||
// name: "posTypeRank",
|
||||
// align: "left",
|
||||
// label: "ระดับตำแหน่ง",
|
||||
// sortable: true,
|
||||
// field: "posTypeRank",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
{
|
||||
name: "posTypeRank",
|
||||
align: "left",
|
||||
label: "ระดับกลุ่มงาน",
|
||||
sortable: true,
|
||||
field: "posTypeRank",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
|
|
@ -85,11 +85,14 @@ const filterKeyword = ref<string>("");
|
|||
const dialog = ref<boolean>(false);
|
||||
const posTypeName = ref<string>("");
|
||||
const posTypeNameRef = ref<QInput | null>(null);
|
||||
const posTypeShortName = ref<string>("");
|
||||
const posTypeShortNameRef = ref<QInput | null>(null);
|
||||
const posTypeRank = ref<number | undefined>();
|
||||
const posTypeRankRef = ref<QInput | null>(null);
|
||||
const dialogStatus = ref<string>("");
|
||||
const visibleColumns = ref<string[]>([
|
||||
"posTypeName",
|
||||
"posTypeShortName",
|
||||
"posTypeRank",
|
||||
// "createdAt",
|
||||
// "lastUpdatedAt",
|
||||
|
|
@ -97,39 +100,59 @@ const visibleColumns = ref<string[]>([
|
|||
]);
|
||||
|
||||
async function fetchData() {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.orgPosType)
|
||||
// .then(async (res) => {
|
||||
// store.save(res.data.result);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgPosType)
|
||||
.then(async (res) => {
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgPosType, {
|
||||
posTypeName: posTypeName.value,
|
||||
posTypeRank: posTypeRank.value,
|
||||
});
|
||||
fetchData();
|
||||
await http
|
||||
.post(config.API.orgPosType, {
|
||||
posTypeName: posTypeName.value,
|
||||
posTypeShortName: posTypeShortName.value,
|
||||
posTypeRank: posTypeRank.value,
|
||||
})
|
||||
.then(() => {
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgPosTypeId(id), {
|
||||
posTypeName: posTypeName.value,
|
||||
posTypeRank: posTypeRank.value,
|
||||
});
|
||||
fetchData();
|
||||
await http
|
||||
.put(config.API.orgPosTypeId(id), {
|
||||
posTypeName: posTypeName.value,
|
||||
posTypeShortName: posTypeShortName.value,
|
||||
posTypeRank: posTypeRank.value,
|
||||
})
|
||||
.then(() => {
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgPosTypeId(id));
|
||||
fetchData();
|
||||
await http
|
||||
.delete(config.API.orgPosTypeId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -276,7 +299,7 @@ async function onSubmit() {
|
|||
</d-table>
|
||||
|
||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 350px">
|
||||
<q-card style="width: 350px">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header
|
||||
|
|
@ -290,34 +313,52 @@ async function onSubmit() {
|
|||
</q-card-section>
|
||||
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-input
|
||||
ref="posTypeNameRef"
|
||||
outlined
|
||||
v-model="posTypeName"
|
||||
label="ชื่อกลุ่มงาน"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
class="col-12 q-ma-md"
|
||||
bg-color="white"
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<!-- <q-input
|
||||
ref="posTypeRankRef"
|
||||
outlined
|
||||
v-model="posTypeRank"
|
||||
label="ระดับ"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
class="col-12 q-ma-md"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
|
||||
hide-bottom-space
|
||||
/> -->
|
||||
<q-card-section class="row q-gutter-y-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="posTypeNameRef"
|
||||
outlined
|
||||
v-model="posTypeName"
|
||||
label="ชื่อกลุ่มงาน"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="posTypeShortNameRef"
|
||||
v-model="posTypeShortName"
|
||||
dense
|
||||
outlined
|
||||
for="#positionShortName"
|
||||
label="อักษรย่อกลุ่มงาน"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อกลุ่มงาน'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="posTypeRankRef"
|
||||
outlined
|
||||
v-model="posTypeRank"
|
||||
label="ระดับกลุ่มงาน"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
bg-color="white"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
|
|
|
|||
|
|
@ -5,12 +5,15 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useRouter, useRoute } from "vue-router";
|
||||
import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
|
||||
import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
|
||||
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
|
||||
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const store = usePositionEmployeeDataStore();
|
||||
const storeName = usePositionTypeDataStore();
|
||||
const storeOption = useMainOptionDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
|
|
@ -345,7 +348,7 @@ async function fetchName() {
|
|||
</d-table>
|
||||
|
||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 350px" class="bg-grey-11">
|
||||
<q-card style="width: 350px">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header
|
||||
|
|
@ -355,58 +358,69 @@ async function fetchName() {
|
|||
</q-card-section>
|
||||
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-input
|
||||
outlined
|
||||
ref="posLevelNameRef"
|
||||
v-model="posLevelName"
|
||||
label="ระดับชั้นงาน"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
class="col-12 q-ma-md"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
|
||||
/>
|
||||
<!-- <q-input
|
||||
bg-color="white"
|
||||
ref="posLevelRankRef"
|
||||
outlined
|
||||
v-model="posLevelRank"
|
||||
label="ระดับ"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
class="col-12 q-ma-md"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
|
||||
hide-bottom-space
|
||||
/> -->
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="posLevelAuthority"
|
||||
label="ผู้มีอำนาจสั่งบรรจุ"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
class="col-12 q-ma-md"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-select
|
||||
ref="posTypeIdRef"
|
||||
v-model="posName"
|
||||
label="กลุ่มงาน"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 q-ma-md"
|
||||
bg-color="white"
|
||||
options-cover
|
||||
hide-bottom-space
|
||||
readonly
|
||||
/>
|
||||
<q-card-section class="row q-gutter-y-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
ref="posLevelNameRef"
|
||||
v-model="posLevelName"
|
||||
label="ระดับชั้นงาน"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
ref="posLevelRankRef"
|
||||
outlined
|
||||
v-model="posLevelRank"
|
||||
label="ระดับ"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
bg-color="white"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
outlined
|
||||
v-model="posLevelAuthority"
|
||||
emit-value
|
||||
map-options
|
||||
:options="storeOption.posLevelAuthorityOption"
|
||||
option-value="label"
|
||||
label="ผู้มีอำนาจสั่งบรรจุ"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
ref="posTypeIdRef"
|
||||
v-model="posName"
|
||||
label="กลุ่มงาน"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
options-cover
|
||||
hide-bottom-space
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
|
|
|
|||
|
|
@ -4,12 +4,14 @@ import type { QInput, QTableProps } from "quasar";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { usePositionDataStore } from "@/modules/01_metadataNew/stores/positionListStore";
|
||||
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
|
||||
import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const store = usePositionDataStore();
|
||||
const storeOption = useMainOptionDataStore();
|
||||
const storeName = usePositionTypeDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -153,30 +155,48 @@ async function fetchData() {
|
|||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgPosLevel, {
|
||||
posLevelName: posLevelName.value,
|
||||
posLevelRank: posLevelRank.value,
|
||||
posLevelAuthority:
|
||||
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
|
||||
posTypeId: id.value,
|
||||
});
|
||||
fetchData();
|
||||
await http
|
||||
.post(config.API.orgPosLevel, {
|
||||
posLevelName: posLevelName.value,
|
||||
posLevelRank: posLevelRank.value,
|
||||
posLevelAuthority:
|
||||
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
|
||||
posTypeId: id.value,
|
||||
})
|
||||
.then(() => {
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function editData(editId: string) {
|
||||
await http.put(config.API.orgPosLevelId(editId), {
|
||||
posLevelName: posLevelName.value,
|
||||
posLevelRank: posLevelRank.value,
|
||||
posLevelAuthority:
|
||||
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
|
||||
posTypeId: id.value,
|
||||
});
|
||||
fetchData();
|
||||
await http
|
||||
.put(config.API.orgPosLevelId(editId), {
|
||||
posLevelName: posLevelName.value,
|
||||
posLevelRank: posLevelRank.value,
|
||||
posLevelAuthority:
|
||||
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
|
||||
posTypeId: id.value,
|
||||
})
|
||||
.then(() => {
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgPosLevelId(id));
|
||||
fetchData();
|
||||
await http
|
||||
.delete(config.API.orgPosLevelId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -345,7 +365,7 @@ async function fetchName() {
|
|||
</d-table>
|
||||
|
||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 350px" class="bg-grey-11">
|
||||
<q-card style="width: 350px">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header
|
||||
|
|
@ -355,54 +375,69 @@ async function fetchName() {
|
|||
</q-card-section>
|
||||
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-input
|
||||
outlined
|
||||
ref="posLevelNameRef"
|
||||
v-model="posLevelName"
|
||||
label="ชื่อระดับตำแหน่ง"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
class="col-12 bg-white q-ma-md"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
|
||||
/>
|
||||
<q-input
|
||||
ref="posLevelRankRef"
|
||||
outlined
|
||||
v-model="posLevelRank"
|
||||
label="ระดับ"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
class="col-12 bg-white q-ma-md"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="posLevelAuthority"
|
||||
label="ผู้มีอำนาจสั่งบรรจุ"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
class="col-12 bg-white q-ma-md"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-select
|
||||
ref="posTypeIdRef"
|
||||
v-model="posName"
|
||||
label="ประเภทตำแหน่ง"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 bg-white q-ma-md"
|
||||
options-cover
|
||||
hide-bottom-space
|
||||
readonly
|
||||
/>
|
||||
<q-card-section class="row q-gutter-y-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
ref="posLevelNameRef"
|
||||
v-model="posLevelName"
|
||||
label="ชื่อระดับตำแหน่ง"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="posLevelRankRef"
|
||||
outlined
|
||||
v-model="posLevelRank"
|
||||
label="ระดับ"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
bg-color="white"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
outlined
|
||||
v-model="posLevelAuthority"
|
||||
emit-value
|
||||
map-options
|
||||
:options="storeOption.posLevelAuthorityOption"
|
||||
option-value="id"
|
||||
label="ผู้มีอำนาจสั่งบรรจุ"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
ref="posTypeIdRef"
|
||||
v-model="posName"
|
||||
label="ประเภทตำแหน่ง"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
options-cover
|
||||
hide-bottom-space
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
|
|
|
|||
30
src/modules/01_metadataNew/stores/main.ts
Normal file
30
src/modules/01_metadataNew/stores/main.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import type { DataOption } from "@/interface/main";
|
||||
|
||||
export const useMainOptionDataStore = defineStore("MainOptionData", () => {
|
||||
const posLevelAuthorityOption = ref<DataOption[]>([
|
||||
{
|
||||
id: "HEAD",
|
||||
label: "หัวหน้าหน่วยงาน",
|
||||
},
|
||||
{
|
||||
id: "DEPUTY",
|
||||
label: "ปลัด",
|
||||
},
|
||||
{
|
||||
id: "GOVERNOR",
|
||||
label: "ผู้ว่าฯ",
|
||||
},
|
||||
]);
|
||||
|
||||
function posLevelAuthorityConvert(val: string) {
|
||||
return posLevelAuthorityOption.value.find((x: DataOption) => x.id === val)
|
||||
?.label;
|
||||
}
|
||||
|
||||
return {
|
||||
posLevelAuthorityOption,
|
||||
posLevelAuthorityConvert,
|
||||
};
|
||||
});
|
||||
|
|
@ -5,6 +5,8 @@ import type {
|
|||
DataRow,
|
||||
} from "../interface/response/position/ListType";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
|
||||
const storeOption = useMainOptionDataStore();
|
||||
|
||||
const { date2Thai } = useCounterMixin();
|
||||
|
||||
|
|
@ -22,6 +24,9 @@ export const usePositionEmployeeDataStore = defineStore(
|
|||
posTypeRank: e.posTypes?.posTypeRank,
|
||||
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
|
||||
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
|
||||
posLevelAuthority: e.posLevelAuthority
|
||||
? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
|
||||
: "-",
|
||||
})) satisfies DataRow[];
|
||||
row.value = list.filter((e) => e.posTypeId === id);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import type {
|
|||
DataResponse,
|
||||
DataRow,
|
||||
} from "../interface/response/position/ListType";
|
||||
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const storeOption = useMainOptionDataStore();
|
||||
|
||||
const { date2Thai } = useCounterMixin();
|
||||
|
||||
|
|
@ -20,9 +22,13 @@ export const usePositionDataStore = defineStore("PositionData", () => {
|
|||
posTypeRank: e.posTypes?.posTypeRank,
|
||||
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
|
||||
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
|
||||
posLevelAuthority: e.posLevelAuthority
|
||||
? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
|
||||
: "-",
|
||||
})) satisfies DataRow[];
|
||||
row.value = list.filter((e) => e.posTypeId === id);
|
||||
}
|
||||
|
||||
return {
|
||||
save,
|
||||
row,
|
||||
|
|
|
|||
|
|
@ -1277,7 +1277,13 @@ function inputPositionLevel(v: string) {
|
|||
}
|
||||
|
||||
function inputPositionLevelBlur() {
|
||||
if (tempPositionLevelInput.value === formDataSalary.levelPosition) return;
|
||||
if (
|
||||
!tempPositionLevelInput.value ||
|
||||
tempPositionLevelInput.value === formDataSalary.levelPosition
|
||||
) {
|
||||
tempPositionLevelInput.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!optionStore.optipnLevel.some(
|
||||
|
|
|
|||
|
|
@ -11,17 +11,16 @@ import ResultsPerformance from "@/modules/04_registryNew/components/detail/Achie
|
|||
const tab = ref<string>("1");
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div class="text-dark row items-center" style="font-size: 22px">
|
||||
<q-icon name="mdi-medal" class="q-mr-md" />
|
||||
<span>ข้อมูลผลงานและเครื่องราชฯ</span>
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-dark row items-center text-weight-bold">
|
||||
<q-icon name="mdi-medal" class="q-mr-md" size="sm" />
|
||||
<h3 class="resigtry-tab-title">ข้อมูลผลงานและเครื่องราชฯ</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="blue"
|
||||
indicator-color="white"
|
||||
|
|
|
|||
|
|
@ -10,17 +10,16 @@ import PerformSpecialWork from "@/modules/04_registryNew/components/detail/Gover
|
|||
const tab = ref<string>("1");
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
|
||||
<q-icon name="mdi-account-tie" class="q-mr-md" />
|
||||
<span>ข้อมูลราชการ</span>
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-dark row items-center text-weight-bold">
|
||||
<q-icon name="mdi-account-tie" class="q-mr-md" size="sm" />
|
||||
<h3 class="resigtry-tab-title">ข้อมูลราชการ</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="blue"
|
||||
indicator-color="white"
|
||||
|
|
|
|||
|
|
@ -8,17 +8,16 @@ import Documentipline from "@/modules/04_registryNew/components/detail/Other/02_
|
|||
const tab = ref<string>("1");
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
|
||||
<q-icon name="mdi-bookmark" class="q-mr-md" />
|
||||
<span>เอกสารหลักฐานและอื่นๆ</span>
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-dark row items-center text-weight-bold">
|
||||
<q-icon name="mdi-bookmark" class="q-mr-md" size="sm" />
|
||||
<h3 class="resigtry-tab-title">เอกสารหลักฐานและอื่นๆ</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="blue"
|
||||
indicator-color="white"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
||||
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsHistoryObject,
|
||||
Columns,
|
||||
} from "@/modules/04_registry/interface/request/Information";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -22,6 +26,10 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
|||
|
||||
const modal = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
|
|
@ -100,8 +108,206 @@ const dataLabel = {
|
|||
lastName: "นามสกุล",
|
||||
};
|
||||
|
||||
const columnsHistory = ref<QTableColumn[]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้าชื่อ",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "birthDate",
|
||||
align: "left",
|
||||
label: "วัน/เดือน/ปี เกิด",
|
||||
sortable: true,
|
||||
field: "birthDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gender",
|
||||
align: "left",
|
||||
label: "เพศ",
|
||||
sortable: true,
|
||||
field: "gender",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "relationship",
|
||||
align: "left",
|
||||
label: "สถานภาพ",
|
||||
sortable: true,
|
||||
field: "relationship",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "bloodGroup",
|
||||
align: "left",
|
||||
label: "หมู่เลือด",
|
||||
sortable: true,
|
||||
field: "bloodGroup",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "nationality",
|
||||
align: "left",
|
||||
label: "สัญชาติ",
|
||||
sortable: true,
|
||||
field: "nationality",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "race",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "race",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "religion",
|
||||
align: "left",
|
||||
label: "ศาสนา",
|
||||
sortable: true,
|
||||
field: "religion",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeType",
|
||||
align: "left",
|
||||
label: "ประเภทการจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeClass",
|
||||
align: "left",
|
||||
label: "ประเภทลูกจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeClass",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"birthDate",
|
||||
"gender",
|
||||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"race",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
// get person detail list
|
||||
const fetchPerson = async () => {
|
||||
async function fetchPerson() {
|
||||
// showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
|
|
@ -162,9 +368,9 @@ const fetchPerson = async () => {
|
|||
// hideLoader();
|
||||
profileStore.isLoad++;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
|
|
@ -219,7 +425,54 @@ const filterSelector = (val: any, update: Function, refData: string) => {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function clickHistory() {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileInforHisId(route.params.id.toString()))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: RequestItemsHistoryObject) => {
|
||||
// rowsHistory.value.push({
|
||||
// citizenId: e.citizenId,
|
||||
// prefix: e.prefix,
|
||||
// firstName: e.firstName,
|
||||
// lastName: e.lastName,
|
||||
// birthDate: new Date(e.birthDate),
|
||||
// gender: e.gender,
|
||||
// relationship: e.relationship,
|
||||
// bloodGroup: e.bloodGroup,
|
||||
// nationality: e.nationality,
|
||||
// race: e.race,
|
||||
// religion: e.religion,
|
||||
// telephoneNumber: e.telephoneNumber,
|
||||
// employeeType:
|
||||
// e.employeeType == "gov"
|
||||
// ? "งบประมาณเงินอุดหนุนรัฐบาล"
|
||||
// : e.employeeType == "bkk"
|
||||
// ? "งบประมาณกรุงเทพมหานคร"
|
||||
// : "-",
|
||||
// employeeClass:
|
||||
// e.employeeClass == "perm"
|
||||
// ? "ลูกจ้างประจำ"
|
||||
// : e.employeeClass == "temp"
|
||||
// ? "ลูกจ้างชั่วคราว"
|
||||
// : "-",
|
||||
// createdFullName: e.createdFullName,
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
|
|
@ -236,11 +489,10 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-pt-sm q-pb-lg justyfy-between items-center">
|
||||
<span class="col text-subtitle1 text-weight-bold text-dark">
|
||||
ประวัติส่วนตัว
|
||||
</span>
|
||||
<div class="col text-right">
|
||||
<div class="row q-gutter-sm items-center">
|
||||
<div class="toptitle col text-dark">ประวัติส่วนตัว</div>
|
||||
|
||||
<div class="toptitle col text-right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -250,7 +502,7 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round icon="mdi-history" color="info">
|
||||
<q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
|
||||
<q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
@ -352,7 +604,10 @@ onMounted(async () => {
|
|||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<DialogHeader tittle="แก้ไขประวัติส่วนตัว" :close="() => modal = false" />
|
||||
<DialogHeader
|
||||
tittle="แก้ไขประวัติส่วนตัว"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
|
|
@ -591,15 +846,46 @@ onMounted(async () => {
|
|||
flat
|
||||
round
|
||||
type="submit"
|
||||
icon="mdi-pencil-outline"
|
||||
color="primary"
|
||||
icon="mdi-content-save-outline"
|
||||
color="secondary"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
position: fixed !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,457 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, useAttrs } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import type { ResponseObject } from "@/components/information/interface/response/OldName";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
DataProps,
|
||||
} from "@/components/information/interface/request/OldName";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
typeChangeName,
|
||||
dialogMessage,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(route.params.id.toString());
|
||||
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<RequestItemsObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล");
|
||||
const visibleColumns = ref<string[]>([
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"status",
|
||||
]);
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"status",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
// mock data
|
||||
const rows = ref<RequestItemsObject[]>([
|
||||
{
|
||||
id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
|
||||
prefix: "นางสาว",
|
||||
prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
|
||||
firstName: "อรัญญาวินัย",
|
||||
lastName: "พรไชยะสาร",
|
||||
status: "all",
|
||||
file: null,
|
||||
createdFullName: "",
|
||||
createdAt: new Date("2024-02-13T14:31:11.959404"),
|
||||
},
|
||||
{
|
||||
id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
|
||||
prefix: "นางสาว",
|
||||
prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
|
||||
firstName: "อรัญญาวินัย",
|
||||
lastName: "พรไชยะสาร",
|
||||
status: "lastName",
|
||||
file: null,
|
||||
createdFullName: "",
|
||||
createdAt: new Date("2024-02-13T14:30:34.660735"),
|
||||
},
|
||||
{
|
||||
id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
|
||||
prefix: "นางสาว",
|
||||
prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
|
||||
firstName: "อรัญญาวินัย",
|
||||
lastName: "พรไชยะสาร",
|
||||
status: "lastName",
|
||||
file: null,
|
||||
createdFullName: "",
|
||||
createdAt: new Date("2024-02-13T14:30:14.562741"),
|
||||
},
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้าชื่อ",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะการเปลี่ยนชื่อ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้าชื่อ",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะการเปลี่ยนชื่อ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
async function openFile(val: string | null) {
|
||||
if (val != null) window.open(val);
|
||||
}
|
||||
|
||||
async function clickHistory(row: RequestItemsObject) {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileChangeNameHisId(row.id))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: ResponseObject) => {
|
||||
// rowsHistory.value.push({
|
||||
// id: e.id,
|
||||
// prefix: e.prefix,
|
||||
// prefixId: e.prefixId,
|
||||
// firstName: e.firstName,
|
||||
// lastName: e.lastName,
|
||||
// status: e.status,
|
||||
// file: e.file,
|
||||
// createdFullName: e.createdFullName,
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileChangeNameId(profileId.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rows.value = [];
|
||||
data.map((e: ResponseObject) => {
|
||||
rows.value.push({
|
||||
id: e.id,
|
||||
prefix: e.prefix,
|
||||
prefixId: e.prefixId,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
status: e.status,
|
||||
file: e.file,
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: new Date(e.createdAt),
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>2</div>
|
||||
<div class="row q-gutter-sm items-center">
|
||||
<div class="toptitle col text-dark">ประวัติการเปลี่ยนชื่อ-นามสกุล</div>
|
||||
|
||||
<div class="toptitle row">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
debounce="300"
|
||||
class="q-ml-sm"
|
||||
ref="filterRef"
|
||||
v-model="filterSearch"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 150px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" v-if="filterSearch == ''" />
|
||||
<q-icon
|
||||
name="clear"
|
||||
v-if="filterSearch !== ''"
|
||||
@click="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
option-value="name"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
class="gt-xs q-ml-sm"
|
||||
style="min-width: 150px"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:rows-per-page-options="[0]"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<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, index) in props.cols" :key="col.name">
|
||||
<div v-if="col.name == 'status'" class="table_ellipsis">
|
||||
{{ typeChangeName(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.file != null"
|
||||
color="green"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-document-outline"
|
||||
@click="openFile(props.row.file)"
|
||||
/>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
:history="true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'" class="table_ellipsis">
|
||||
{{ typeChangeName(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.file != null"
|
||||
color="green"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-document-outline"
|
||||
@click="openFile(props.row.file)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { QForm, useQuasar } from "quasar";
|
|||
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
const { dialogConfirm } = mixin;
|
||||
|
||||
const formRef = ref<QForm | null>(null);
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const fatherPrefixRef = ref<any>(null);
|
|||
const fatherFirstNameRef = ref<any>(null);
|
||||
const fatherLastNameRef = ref<any>(null);
|
||||
const fatherData = reactive({
|
||||
isHaveInfo: "0",
|
||||
isHaveInfo: 0,
|
||||
isDead: false,
|
||||
citizenId: null,
|
||||
prefix: null,
|
||||
|
|
@ -26,7 +26,7 @@ const fatherData = reactive({
|
|||
job: null,
|
||||
});
|
||||
const motherData = reactive({
|
||||
isHaveInfo: "0",
|
||||
isHaveInfo: 0,
|
||||
isDead: false,
|
||||
citizenId: null,
|
||||
prefix: null,
|
||||
|
|
@ -36,7 +36,7 @@ const motherData = reactive({
|
|||
job: null,
|
||||
});
|
||||
const spouseData = reactive({
|
||||
isHave: "0",
|
||||
isHave: 0,
|
||||
isDead: false,
|
||||
citizenId: null,
|
||||
prefix: null,
|
||||
|
|
@ -69,7 +69,6 @@ function closeHistoryDialog() {
|
|||
}
|
||||
|
||||
function validateForm() {
|
||||
console.log("test");
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
|
|
@ -105,8 +104,8 @@ function deleteChildren(items: any) {
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between text-center">
|
||||
<div class="text-h6 text-center">ข้อมูลครอบครัว</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="toptitle col text-dark">ข้อมูลครอบครัว</div>
|
||||
<div>
|
||||
<q-btn
|
||||
round
|
||||
|
|
@ -217,7 +216,7 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
:disable="true"
|
||||
label="มีข้อมูล"
|
||||
dense
|
||||
|
|
@ -227,7 +226,7 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
:disable="true"
|
||||
color="red"
|
||||
label="ไม่มีข้อมูล"
|
||||
|
|
@ -465,7 +464,7 @@ function deleteChildren(items: any) {
|
|||
v-model="fatherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
label="มีข้อมูล"
|
||||
dense
|
||||
color="primary"
|
||||
|
|
@ -474,14 +473,14 @@ function deleteChildren(items: any) {
|
|||
v-model="fatherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
color="red"
|
||||
label="ไม่มีข้อมูล"
|
||||
dense
|
||||
/>
|
||||
<q-separator color="grey-4" vertical />
|
||||
<q-checkbox
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
outline
|
||||
v-model="fatherData.isDead"
|
||||
label="เสียชีวิตแล้ว"
|
||||
|
|
@ -492,10 +491,11 @@ function deleteChildren(items: any) {
|
|||
</div>
|
||||
<div class="flex q-gutter-sm">
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
dense
|
||||
v-model="fatherData.citizenId"
|
||||
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||
|
|
@ -503,41 +503,47 @@ function deleteChildren(items: any) {
|
|||
mask="#############"
|
||||
/>
|
||||
<q-select
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
dense
|
||||
v-model="fatherData.prefix"
|
||||
:options="fatherData.optionPrefix"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
||||
label="คำนำหน้าชื่อ"
|
||||
hidden-space
|
||||
/>
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
v-model="fatherData.firstName"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
label="ชื่อ"
|
||||
hidden-space
|
||||
/>
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
v-model="fatherData.lastName"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
label="นามสกุล"
|
||||
/>
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="fatherData.job"
|
||||
label="อาชีพ"
|
||||
/>
|
||||
|
|
@ -549,7 +555,7 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
label="มีข้อมูล"
|
||||
dense
|
||||
color="primary"
|
||||
|
|
@ -558,14 +564,14 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
color="red"
|
||||
label="ไม่มีข้อมูล"
|
||||
dense
|
||||
/>
|
||||
<q-separator color="grey-4" vertical />
|
||||
<q-checkbox
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
outline
|
||||
v-model="motherData.isDead"
|
||||
label="เสียชีวิตแล้ว"
|
||||
|
|
@ -576,31 +582,34 @@ function deleteChildren(items: any) {
|
|||
</div>
|
||||
<div class="flex q-gutter-sm">
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="motherData.citizenId"
|
||||
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
<q-select
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
v-model="motherData.prefix"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
:options="motherData.optionPrefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
/>
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
bg-color="white"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
dense
|
||||
lazy-rules
|
||||
|
|
@ -608,19 +617,21 @@ function deleteChildren(items: any) {
|
|||
label="ชื่อ"
|
||||
/>
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
class="col"
|
||||
outlined
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
dense
|
||||
v-model="motherData.lastName"
|
||||
label="นามสกุล"
|
||||
/>
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
v-model="motherData.job"
|
||||
label="อาชีพ"
|
||||
|
|
@ -633,7 +644,7 @@ function deleteChildren(items: any) {
|
|||
v-model="spouseData.isHave"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
label="มี"
|
||||
dense
|
||||
color="primary"
|
||||
|
|
@ -642,14 +653,14 @@ function deleteChildren(items: any) {
|
|||
v-model="spouseData.isHave"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
color="red"
|
||||
label="ไม่มี"
|
||||
dense
|
||||
/>
|
||||
<q-separator color="grey-4" vertical />
|
||||
<q-checkbox
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outline
|
||||
v-model="spouseData.isDead"
|
||||
label="เสียชีวิตแล้ว"
|
||||
|
|
@ -661,10 +672,11 @@ function deleteChildren(items: any) {
|
|||
<div class="flex q-gutter-sm">
|
||||
<q-input
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="spouseData.citizenId"
|
||||
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||
maxlength="13"
|
||||
|
|
@ -672,9 +684,10 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
<q-select
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="spouseData.prefix"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
||||
:options="spouseData.optionPrefix"
|
||||
|
|
@ -682,7 +695,8 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
<q-input
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
bg-color="white"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
|
|
@ -692,17 +706,19 @@ function deleteChildren(items: any) {
|
|||
<q-input
|
||||
class="col"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="spouseData.lastName"
|
||||
label="นามสกุล"
|
||||
/>
|
||||
<q-input
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="spouseData.job"
|
||||
label="อาชีพ"
|
||||
/>
|
||||
|
|
@ -755,6 +771,7 @@ function deleteChildren(items: any) {
|
|||
v-model="items.citizenId"
|
||||
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||
maxlength="13"
|
||||
bg-color="white"
|
||||
mask="#############"
|
||||
/>
|
||||
<q-select
|
||||
|
|
@ -762,6 +779,7 @@ function deleteChildren(items: any) {
|
|||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
v-model="items.prefix"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
||||
:options="childrenOptionPrefix"
|
||||
|
|
@ -772,6 +790,7 @@ function deleteChildren(items: any) {
|
|||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
v-model="items.firstName"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
label="ชื่อ"
|
||||
|
|
@ -780,6 +799,7 @@ function deleteChildren(items: any) {
|
|||
class="col"
|
||||
outlined
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
dense
|
||||
v-model="items.lastName"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
|
|
@ -788,6 +808,7 @@ function deleteChildren(items: any) {
|
|||
<q-input
|
||||
class="col"
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
v-model="items.job"
|
||||
label="อาชีพ"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,944 @@
|
|||
<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: "level",
|
||||
align: "left",
|
||||
label: "ระดับศึกษา",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "institute",
|
||||
align: "left",
|
||||
label: "สถานศึกษา",
|
||||
sortable: true,
|
||||
field: "institute",
|
||||
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: "finishDate",
|
||||
align: "left",
|
||||
label: "ถึง",
|
||||
sortable: true,
|
||||
field: "finishDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "graduateDate",
|
||||
align: "left",
|
||||
label: "วันที่สำเร็จการศึกษา",
|
||||
sortable: true,
|
||||
field: "graduateDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "isEducation",
|
||||
align: "left",
|
||||
label: "เป็นวุฒิการศึกษาในตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "isEducation",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "degree",
|
||||
align: "left",
|
||||
label: "วุฒิการศึกษา",
|
||||
sortable: true,
|
||||
field: "degree",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "field",
|
||||
align: "left",
|
||||
label: "สาขาวิชา/ทาง",
|
||||
sortable: true,
|
||||
field: "field",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "fundName",
|
||||
align: "left",
|
||||
label: "ทุน",
|
||||
sortable: true,
|
||||
field: "fundName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gpa",
|
||||
align: "left",
|
||||
label: "เกรดเฉลี่ย",
|
||||
sortable: true,
|
||||
field: "gpa",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "country",
|
||||
align: "left",
|
||||
label: "ประเทศ",
|
||||
sortable: true,
|
||||
field: "country",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "other",
|
||||
align: "left",
|
||||
label: "ข้อมูลการติดต่อ",
|
||||
sortable: true,
|
||||
field: "other",
|
||||
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: "durationYear",
|
||||
align: "left",
|
||||
label: "ระยะเวลาหลักสูตร",
|
||||
sortable: true,
|
||||
field: "durationYear",
|
||||
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(),
|
||||
finishDate: new Date(),
|
||||
isEducation: "",
|
||||
degree: "",
|
||||
field: "",
|
||||
fundName: "",
|
||||
gpa: null,
|
||||
country: "",
|
||||
other: "",
|
||||
duration: "",
|
||||
durationYear: "",
|
||||
note: "",
|
||||
});
|
||||
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
const row = [
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "เชียงใหม่วิทย์",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "4.5",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "โปลิวิทยาคม",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "3.8",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "โรงเรียนวัฒโน",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "3.8",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "โรงเรียนวัฒโน",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "3.8",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"level",
|
||||
"institute",
|
||||
"degree",
|
||||
"field",
|
||||
"gpa",
|
||||
"country",
|
||||
"duration",
|
||||
"durationYear",
|
||||
"other",
|
||||
"fundName",
|
||||
"isEducation",
|
||||
"finishDate",
|
||||
"startDate",
|
||||
"graduateDate",
|
||||
]);
|
||||
|
||||
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") {
|
||||
educationData.startDate = new Date(`${educationData.startYear}`);
|
||||
educationData.finishDate = new Date(`${educationData.finishYear}`);
|
||||
} else {
|
||||
educationData.startYear = parseInt(
|
||||
moment(educationData.startDate).format("YYYY")
|
||||
);
|
||||
educationData.finishYear = parseInt(
|
||||
moment(educationData.finishDate).format("YYYY")
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>5</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-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 === 'finishDate' ||
|
||||
col.name === 'graduateDate'
|
||||
"
|
||||
>
|
||||
{{ 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-3 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 === 'finishDate' ||
|
||||
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-grey-11">
|
||||
<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">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.level"
|
||||
label="ระดับการศึกษา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.institute"
|
||||
label="สถานศึกษา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</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">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.startYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
class="col"
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="educationData.startYear"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="educationData.startYear + 543"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
|
||||
]"
|
||||
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.finishYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
class="col"
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="educationData.finishYear"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="educationData.finishYear + 543"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
|
||||
]"
|
||||
:label="`${'ปีที่จบการศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div v-if="isDate === 'true'" class="row q-gutter-sm">
|
||||
<datepicker
|
||||
class="col"
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.startDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="date2Thai(educationData.startDate)"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.finishDate"
|
||||
:locale="'th'"
|
||||
class="col"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="date2Thai(educationData.finishDate)"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.graduateDate"
|
||||
:locale="'th'"
|
||||
class="col"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="date2Thai(educationData.graduateDate)"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
class="col"
|
||||
v-model="educationData.isEducation"
|
||||
:options="educationOption"
|
||||
label="เป็นวุฒิการศึกษาในตำแหน่ง"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-py-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.degree"
|
||||
label="วุฒิการศึกษา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.field"
|
||||
label="สาขาวิชา/ทาง"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.fundName"
|
||||
label="ทุน"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.gpa"
|
||||
label="เกรดเฉลี่ย"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
mask="#.##"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.country"
|
||||
label="ประเทศ"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.other"
|
||||
label="ข้อมูลติดต่อ"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.duration"
|
||||
label="ระยะเวลา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.durationYear"
|
||||
label="ระยะเวลาหลักสูตร"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
type="number"
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.note"
|
||||
label="หมายเหตุ"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</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-grey-11">
|
||||
<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 === 'finishDate' ||
|
||||
col.name === 'graduateDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.borderCard {
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,433 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const mode = ref<string>("table");
|
||||
const { dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "field",
|
||||
align: "left",
|
||||
label: "ด้าน",
|
||||
sortable: true,
|
||||
field: "field",
|
||||
headerStyle: "font-size: 14px; width: 50px;",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "remark",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: true,
|
||||
field: "remark",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "reference",
|
||||
align: "left",
|
||||
label: "เอกสารอ้างอิง",
|
||||
sortable: true,
|
||||
field: "reference",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const historyDialog = ref<boolean>(false);
|
||||
const rows = [
|
||||
{
|
||||
field: "กีต้าร์",
|
||||
detail: "ตะแน่วๆ",
|
||||
remark: "เล่นดีมาก",
|
||||
reference: "อ้างอิง",
|
||||
},
|
||||
{
|
||||
field: "ว่ายน้ำ",
|
||||
detail: "ตะแน่วๆ",
|
||||
remark: "เล่นดีมาก",
|
||||
reference: "อ้างอิง",
|
||||
},
|
||||
{
|
||||
field: "กีฬา",
|
||||
detail: "ตะแน่วๆ",
|
||||
remark: "เล่นดีมาก",
|
||||
reference: "อ้างอิง",
|
||||
},
|
||||
{
|
||||
field: "การเรียน",
|
||||
detail: "ตะแน่วๆ",
|
||||
remark: "เล่นดีมาก",
|
||||
reference: "อ้างอิง",
|
||||
},
|
||||
];
|
||||
const dialog = ref<boolean>(false);
|
||||
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const specialSkill = reactive({
|
||||
field: "",
|
||||
detail: "",
|
||||
remark: "",
|
||||
reference: "",
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"field",
|
||||
"detail",
|
||||
"remark",
|
||||
"reference",
|
||||
]);
|
||||
function closeDialog() {
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
function closeHistoryDialog() {
|
||||
historyDialog.value = false;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
closeDialog();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>6</div>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
ความสามารถพิเศษ
|
||||
</div>
|
||||
</div>
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="() => (dialog = true)">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
dense
|
||||
v-if="mode === 'table'"
|
||||
outlined
|
||||
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
|
||||
v-if="mode === 'table'"
|
||||
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-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"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:paging="true"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-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="dialog = true">
|
||||
<div>{{ col.value ? 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-3 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="edit"
|
||||
@click="dialog = 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" :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>{{ col.value }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 40%" class="bg-grey-11">
|
||||
<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="col q-gutter-sm q-pr-md">
|
||||
<div class="row q-gutter-sm q-ml-none">
|
||||
<q-input
|
||||
outlined
|
||||
class="col"
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="specialSkill.field"
|
||||
label="ด้าน"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
class="col"
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="specialSkill.detail"
|
||||
label="รายละเอียด"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||
/>
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="specialSkill.remark"
|
||||
label="หมายเหตุ"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
v-model="specialSkill.reference"
|
||||
label="เอกสารอ้างอิง"
|
||||
/>
|
||||
</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-grey-11">
|
||||
<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="rows"
|
||||
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>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,16 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
|
|||
const tab = ref<string>("1");
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div
|
||||
class="text-dark row items-center text-weight-bold"
|
||||
style="font-size: 20px"
|
||||
>
|
||||
<q-icon name="mdi-account" class="q-mr-md" />
|
||||
<span>ข้อมูลส่วนตัว</span>
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-dark row items-center text-weight-bold">
|
||||
<q-icon name="mdi-account" class="q-mr-md" size="sm" />
|
||||
<h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="blue"
|
||||
indicator-color="white"
|
||||
|
|
@ -33,7 +29,7 @@ const tab = ref<string>("1");
|
|||
narrow-indicator
|
||||
bordered
|
||||
>
|
||||
<q-tab name="1" label="ข้อมูลส่วนตัว" />
|
||||
<q-tab name="1" label="ประวัติส่วนตัว" />
|
||||
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
|
||||
<q-tab name="3" label="ข้อมูลที่อยู่" />
|
||||
<q-tab name="4" label="ข้อมูลครอบครัว" />
|
||||
|
|
|
|||
|
|
@ -327,11 +327,11 @@ function ocClikcHistory() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<!-- <div class="row items-center q-gutter-sm">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
ตำแหน่งเงินเดือน
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
|
|
@ -475,290 +475,285 @@ function ocClikcHistory() {
|
|||
:close="onClickCloseDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm bg-grey-1">
|
||||
<q-card-section class="q-pa-md bg-grey-1">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<q-card flat bordered class="fit q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-xs">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
v-model="formDataSalary.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateRef"
|
||||
outlined
|
||||
dense
|
||||
borderless
|
||||
:model-value="date2Thai(formDataSalary.date)"
|
||||
:rules="[
|
||||
<q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
v-model="formDataSalary.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateRef"
|
||||
outlined
|
||||
dense
|
||||
borderless
|
||||
:model-value="date2Thai(formDataSalary.date)"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือก วัน/เดือน/ปี'}`,
|
||||
]"
|
||||
:label="`${'วัน/เดือน/ปี'}`"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="posNoRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.posNo"
|
||||
:label="`${'วัน/เดือน/ปี'}`"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่ตำแหน่ง'}`"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 q-mt-lg">
|
||||
<q-select
|
||||
ref="templatePosRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.templatePos"
|
||||
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
|
||||
option-label="name"
|
||||
:options="posNoOptions"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@update:modelValue="updatePos"
|
||||
@filter="(inputValue: any,
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="posNoRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.posNo"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่ตำแหน่ง'}`"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-select
|
||||
ref="templatePosRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.templatePos"
|
||||
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
|
||||
option-label="name"
|
||||
:options="posNoOptions"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@update:modelValue="updatePos"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
ref="positionRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.position"
|
||||
:label="`${'ตำแหน่ง'}`"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
ref="positionRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.position"
|
||||
:label="`${'ตำแหน่ง'}`"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.positionLineName"
|
||||
:label="`${'สายงาน'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionLineOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.positionLineName"
|
||||
:label="`${'สายงาน'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionLineOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select
|
||||
ref="typePositionRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.typePosition"
|
||||
:label="`${'ตำแหน่งประเภท'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posTypeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
|
||||
@filter="(inputValue: any,
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="formDataSalary.positionPathSideName"
|
||||
hide-bottom-space
|
||||
:label="`${'ด้าน/สาขา'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.positionExecutiveName"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่งทางการบริหาร'}`"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-select
|
||||
ref="typePositionRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.typePosition"
|
||||
:label="`${'ตำแหน่งประเภท'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posTypeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||
<q-select
|
||||
ref="levelPositionRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.levelPosition"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
|
||||
:label="`${'ระดับ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posLevelOption"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-select
|
||||
ref="levelPositionRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.levelPosition"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
|
||||
:label="`${'ระดับตำแหน่ง'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posLevelOption"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-4"></div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
ref="salaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataSalary.salary"
|
||||
label="เงินเดือน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="formDataSalary.positionPathSideName"
|
||||
hide-bottom-space
|
||||
:label="`${'ด้าน/สาขา'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.positionExecutiveName"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่งทางการบริหาร'}`"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataSalary.salaryPos"
|
||||
label="เงินประจำตำแหน่ง"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataSalary.salaryCompensation"
|
||||
label="เงินค่าตอบแทนรายเดือน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
ref="salaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataSalary.salary"
|
||||
label="เงินเดือน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.refCommandNo"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
mask="#####################"
|
||||
>
|
||||
<!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataSalary.salaryPos"
|
||||
label="เงินประจำตำแหน่ง"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataSalary.salaryCompensation"
|
||||
label="เงินค่าตอบแทนรายเดือน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.refCommandNo"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
mask="#####################"
|
||||
>
|
||||
<!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-select
|
||||
ref="templateDocRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.templateDoc"
|
||||
:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
|
||||
option-label="name"
|
||||
:options="docOption"
|
||||
option-value="name"
|
||||
emit-value
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@update:modelValue="updateDoc"
|
||||
@filter="(inputValue: any,
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-select
|
||||
ref="templateDocRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.templateDoc"
|
||||
:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
|
||||
option-label="name"
|
||||
:options="docOption"
|
||||
option-value="name"
|
||||
emit-value
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@update:modelValue="updateDoc"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
ref="docRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.doc"
|
||||
:label="`${'เอกสารอ้างอิง'}`"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
ref="docRef"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formDataSalary.doc"
|
||||
:label="`${'เอกสารอ้างอิง'}`"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
:rules="[(val: number) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
|
|
|||
|
|
@ -183,11 +183,11 @@ function ocClikcHistory() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<!-- <div class="row items-center q-gutter-sm">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
บันทึกวันที่ไม่ได้รับเงินเดือนฯ
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
|
|
@ -225,7 +225,7 @@ function ocClikcHistory() {
|
|||
<q-btn-toggle
|
||||
v-model="modelView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow"
|
||||
class="no-shadow toggle-borderd"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
|
|
@ -234,7 +234,7 @@ function ocClikcHistory() {
|
|||
<template v-slot:table>
|
||||
<q-icon
|
||||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
size="sm"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
|
|
@ -243,7 +243,7 @@ function ocClikcHistory() {
|
|||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
size="sm"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -8,20 +8,16 @@ import NotReceiveSalary from "@/modules/04_registryNew/components/detail/Salary/
|
|||
const tab = ref<string>("1");
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div
|
||||
class="text-dark row items-center text-weight-bold"
|
||||
style="font-size: 20px"
|
||||
>
|
||||
<q-icon name="mdi-cash" class="q-mr-md" />
|
||||
<span>ข้อมูลเงินเดือน/ค่าจ้าง</span>
|
||||
<div class="row items-center q-mb-md">
|
||||
<div class="text-dark row items-center text-weight-bold">
|
||||
<q-icon name="mdi-cash" class="q-mr-md" size="sm" />
|
||||
<h3 class="resigtry-tab-title">ข้อมูลเงินเดือน/ค่าจ้าง</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="blue"
|
||||
indicator-color="white"
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ const itemsTab = ref<any>([
|
|||
|
||||
const splitterModel = ref<number>(12);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-splitter v-model="splitterModel" disable>
|
||||
<template v-slot:before>
|
||||
|
|
@ -64,7 +65,7 @@ const splitterModel = ref<number>(12);
|
|||
vertical
|
||||
transition-prev="jump-up"
|
||||
transition-next="jump-up"
|
||||
class="q-pa-md"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tab-panel
|
||||
v-for="(tab, index) in itemsTab"
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<div class="row items-center q-gutter-sm q-mb-xs">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
|
|
@ -83,7 +83,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<q-space />
|
||||
<q-btn-dropdown
|
||||
size="16px"
|
||||
size="md"
|
||||
rounded
|
||||
unelevated
|
||||
color="grey-4"
|
||||
|
|
@ -104,6 +104,7 @@ onMounted(() => {
|
|||
color="grey-4"
|
||||
text-color="primary"
|
||||
icon="mdi-file-eye-outline"
|
||||
size="md"
|
||||
>
|
||||
<q-tooltip>ดาวน์ไฟล์</q-tooltip>
|
||||
<q-menu>
|
||||
|
|
@ -120,17 +121,19 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<q-card>
|
||||
<div class="column" style="height: 170px">
|
||||
<div class="column" style="height: 160px">
|
||||
<div class="col row items-center">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-3 col-md-2"></div>
|
||||
<div class="col">
|
||||
<div class="col-12 text-primary" style="font-size: 20px">
|
||||
{{
|
||||
`${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}`
|
||||
}}
|
||||
<div class="col-12 text-primary">
|
||||
<h2 class="title q-ma-none q-pa-none">
|
||||
{{
|
||||
`${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}`
|
||||
}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-12">{{ formDetail?.position }}</div>
|
||||
<div class="col-12 subtitle">{{ formDetail?.position }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,20 +156,20 @@ onMounted(() => {
|
|||
<div class="col-sm-3 col-md-2"></div>
|
||||
<div class="col-2">
|
||||
<div class="col-sm-3 col-md-3">
|
||||
<div class="col text-grey-5">ตำแหน่งในสายงาน</div>
|
||||
<div class="col text-grey-6">ตำแหน่งในสายงาน</div>
|
||||
<div class="col">หัวหน้าสำนักงาน</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="col-sm-3 col-md-3">
|
||||
<div class="col text-grey-5">ประเภทตำแหน่ง</div>
|
||||
<div class="col text-grey-6">ประเภทตำแหน่ง</div>
|
||||
<div class="col">บริหาร</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="col-sm-3 col-md-3">
|
||||
<div class="col text-grey-5">ระดับตำแหน่งง</div>
|
||||
<div class="col">สำนาญการพิเศษ</div>
|
||||
<div class="col text-grey-6">ระดับตำแหน่งง</div>
|
||||
<div class="col">ชำนาญการพิเศษ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -174,15 +177,27 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="q-mt-md">
|
||||
<q-card class="q-mt-md rounded">
|
||||
<TabMain />
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h2.title {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
color: #34373c;
|
||||
}
|
||||
.absolute-center-left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1080,7 +1080,6 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
|
||||
<q-input
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
hide-bottom-space
|
||||
|
|
@ -1090,11 +1089,10 @@ onMounted(async () => {
|
|||
outlined
|
||||
v-model="fullname"
|
||||
label="ชื่อ-นามสกุล"
|
||||
bg-color="white"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
|
||||
<q-input
|
||||
:rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
|
||||
hide-bottom-space
|
||||
|
|
@ -1104,8 +1102,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
v-model="position"
|
||||
label="ตำแหน่ง"
|
||||
bg-color="white"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
|
|
@ -1126,8 +1124,8 @@ onMounted(async () => {
|
|||
:outlined="status == true"
|
||||
v-model="monthSelect"
|
||||
:label="`ระยะเวลา (เดือน)`"
|
||||
bg-color="white"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1162,12 +1160,12 @@ onMounted(async () => {
|
|||
"
|
||||
:label="`${'ตั้งเเต่วันที่'}`"
|
||||
clearable
|
||||
bg-color="white"
|
||||
@clear="clearDateExam"
|
||||
>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1201,12 +1199,12 @@ onMounted(async () => {
|
|||
"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
clearable
|
||||
bg-color="white"
|
||||
@clear="clearDateExam2"
|
||||
>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1237,6 +1235,7 @@ onMounted(async () => {
|
|||
@filter="filterFnCaretaker"
|
||||
use-input
|
||||
behavior="menu"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -1245,7 +1244,7 @@ onMounted(async () => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</q-select>
|
||||
|
||||
<q-select
|
||||
clearable
|
||||
|
|
@ -1263,6 +1262,7 @@ onMounted(async () => {
|
|||
@filter="filterFnCaretaker2"
|
||||
use-input
|
||||
behavior="menu"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -1304,7 +1304,6 @@ onMounted(async () => {
|
|||
v-model="caretaker2"
|
||||
:label="`ผู้ดูแลคนที่ 2`"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
|
@ -1329,7 +1328,6 @@ onMounted(async () => {
|
|||
class="q-ml-sm"
|
||||
@click="addActivity"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="col-12 row q-gutter-sm">
|
||||
<q-card
|
||||
|
|
@ -1341,7 +1339,6 @@ onMounted(async () => {
|
|||
>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
|
||||
<q-input
|
||||
:rules="
|
||||
index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
|
||||
|
|
@ -1356,10 +1353,8 @@ onMounted(async () => {
|
|||
v-model="activity_desc[index]"
|
||||
label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
|
||||
<q-input
|
||||
:rules="
|
||||
index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
|
||||
|
|
@ -1374,14 +1369,12 @@ onMounted(async () => {
|
|||
v-model="goal_desc[index]"
|
||||
label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<!-- delete -->
|
||||
<div
|
||||
v-if="index > 1"
|
||||
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
||||
>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -1390,7 +1383,6 @@ onMounted(async () => {
|
|||
@click="deleteactivity(index)"
|
||||
v-if="status == true"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -1417,7 +1409,6 @@ onMounted(async () => {
|
|||
class="q-ml-sm"
|
||||
@click="addKnowledge"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in knowledgeArray"
|
||||
|
|
@ -1425,7 +1416,6 @@ onMounted(async () => {
|
|||
class="col-12 row q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-11 q-my-xs">
|
||||
|
||||
<q-select
|
||||
:option-label="
|
||||
(item) => `${item.title}-${item.description}`
|
||||
|
|
@ -1449,13 +1439,11 @@ onMounted(async () => {
|
|||
index + 1
|
||||
}`"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="index > 2"
|
||||
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
||||
>
|
||||
|
||||
<q-btn
|
||||
v-if="status == true"
|
||||
flat
|
||||
|
|
@ -1464,7 +1452,6 @@ onMounted(async () => {
|
|||
icon="mdi-trash-can-outline"
|
||||
@click="deleteknowledge(index)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2119,6 +2106,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
:outlined="status == true"
|
||||
v-model="Other"
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2153,7 +2141,6 @@ onMounted(async () => {
|
|||
:rules="
|
||||
index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
|
||||
"
|
||||
class="bg-white"
|
||||
type="textarea"
|
||||
:readonly="status != true"
|
||||
dense
|
||||
|
|
@ -2161,6 +2148,7 @@ onMounted(async () => {
|
|||
:outlined="status == true"
|
||||
v-model="output_desc[index]"
|
||||
label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -2170,7 +2158,7 @@ onMounted(async () => {
|
|||
index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
|
||||
"
|
||||
hide-bottom-space
|
||||
class="bg-white"
|
||||
bg-color="white"
|
||||
type="textarea"
|
||||
:readonly="status != true"
|
||||
dense
|
||||
|
|
@ -2269,6 +2257,7 @@ onMounted(async () => {
|
|||
:outlined="status == true"
|
||||
v-model="Other5"
|
||||
label="กรอกอื่นๆ"
|
||||
bg-color="white"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
|
|
@ -2351,7 +2340,6 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<q-input
|
||||
:readonly="status != true"
|
||||
|
|
@ -2360,6 +2348,7 @@ onMounted(async () => {
|
|||
:outlined="status == true"
|
||||
v-model="fullname"
|
||||
label="ชื่อ-นามสกุล"
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -2371,6 +2360,7 @@ onMounted(async () => {
|
|||
:outlined="status == true"
|
||||
v-model="position"
|
||||
label="ตำแหน่ง"
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -2402,6 +2392,7 @@ onMounted(async () => {
|
|||
class="full-width datepicker"
|
||||
:model-value="date1 != null ? date2Thai(date1) : null"
|
||||
label="ลงวันที่"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -2440,6 +2431,7 @@ onMounted(async () => {
|
|||
@filter="filterFnCaretaker"
|
||||
use-input
|
||||
behavior="menu"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -2465,6 +2457,7 @@ onMounted(async () => {
|
|||
@filter="filterFnCaretaker"
|
||||
use-input
|
||||
behavior="menu"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -2503,6 +2496,7 @@ onMounted(async () => {
|
|||
class="full-width datepicker"
|
||||
:model-value="date2 != null ? date2Thai(date2) : null"
|
||||
label="ลงวันที่"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -2533,6 +2527,7 @@ onMounted(async () => {
|
|||
@filter="filterFnCaretaker2"
|
||||
use-input
|
||||
behavior="menu"
|
||||
bg-color="white"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
|
|
@ -2558,6 +2553,7 @@ onMounted(async () => {
|
|||
@filter="filterFnCaretaker2"
|
||||
use-input
|
||||
behavior="menu"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -2603,6 +2599,7 @@ onMounted(async () => {
|
|||
caretaker2 != null ? date2Thai(date3) : null
|
||||
"
|
||||
label="ลงวันที่"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -2641,6 +2638,7 @@ onMounted(async () => {
|
|||
use-input
|
||||
behavior="menu"
|
||||
@filter="filterFnCommander"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -2667,6 +2665,7 @@ onMounted(async () => {
|
|||
use-input
|
||||
behavior="menu"
|
||||
@filter="filterFnCommander"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -2705,6 +2704,7 @@ onMounted(async () => {
|
|||
class="full-width datepicker"
|
||||
:model-value="date4 != null ? date2Thai(date4) : null"
|
||||
label="ลงวันที่"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -2743,6 +2743,7 @@ onMounted(async () => {
|
|||
use-input
|
||||
behavior="menu"
|
||||
@filter="filterFnChairman"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -2752,7 +2753,7 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
|
||||
<q-select
|
||||
v-else
|
||||
:options="OPchairmanFn"
|
||||
|
|
@ -2769,6 +2770,7 @@ onMounted(async () => {
|
|||
use-input
|
||||
behavior="menu"
|
||||
@filter="filterFnChairman"
|
||||
bg-color="white"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
|
|||
|
|
@ -145,3 +145,13 @@ $muti-tab: #87d4cc
|
|||
|
||||
.input-alert i.text-primary
|
||||
color: #f00 !important
|
||||
|
||||
/* registry common style */
|
||||
.toggle-borderd
|
||||
border: 1px solid #ecebeb
|
||||
|
||||
h3.resigtry-tab-title
|
||||
font-size: 1.2rem
|
||||
font-weight: 600
|
||||
margin: 0 0
|
||||
padding: 0 0
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue