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

Refactoring code module 08_registryEmployee

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-19 17:09:26 +07:00
parent bd33093d3e
commit 7091eaaeb9
31 changed files with 169 additions and 24405 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue
View file

@ -1,34 +0,0 @@
<script setup lang="ts">
const props = defineProps({
header: {
type: String,
default: "ข้อความ",
required: true,
},
icon: {
type: String,
default: "mdi-help",
required: true,
},
});
</script>
<template>
<div class="flex items-center">
<div class="flex items-center">
<q-icon
:name="props.icon"
size="1.5em"
color="grey-5"
class="q-mr-md"
v-if="props.icon != ''"
/>
<div
class="text-bold text-subtitle2 col-12 row items-center"
v-if="props.header != ''"
>
{{ props.header }}
</div>
</div>
</div>
</template>

685
src/modules/08_registryEmployee/components/AddEmployee/Main.vue
View file

@ -1,685 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import type { QForm } from "quasar";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import type {
Information,
DataOption,
} from "@/modules/04_registry/components/profileType";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
dialogMessage,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const informaData = ref<Information>({
cardid: null,
age: null,
prefix: null,
prefixId: null,
firstname: null,
lastname: null,
birthDate: null,
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
});
const myform = ref<QForm | null>(null);
const dateBefore = ref<Date>(new Date());
// รายการข้อมูลทั้งหมด
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [],
employeeTypeOps: [],
});
// ข้อมูลเมื่อเลือกแล้ว
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [],
employeeTypeOps: [],
});
// call function get รายการข้อมูลต่างๆ
onMounted(async () => {
await fetchPerson();
});
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
const fetchPerson = async () => {
showLoader();
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => {})
.finally(() => {
hideLoader();
});
};
// รูป profile
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);
const uploadImage = async (e: any) => {
const input = e.target.files;
if (input.length > 0) {
const url = URL.createObjectURL(input[0]);
image.value = url;
fileData.value = input[0];
}
};
// คลิกแก้ไขรูป profile
const addNewImage = async () => {
inputImage.value.click();
};
// ตรวจสอบเลขประจำตัวประชาชน
const defaultCitizenData = ref<string>("");
const changeCardID = async (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
await checkCitizen(value);
}
}
};
const checkCitizen = async (id: string) => {
showLoader();
await http
.get(config.API.profileCitizenId(id))
.then((res) => {
const data = res.data.result.citizen;
if (!data) {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
informaData.value.cardid = defaultCitizenData.value;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
// filter list ข้อมูลต่างๆ
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "genderOps":
update(() => {
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "bloodOps":
update(() => {
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "religionOps":
update(() => {
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
const calculateMaxDate = () => {
const today = new Date();
today.setDate(today.getDate() - 1);
return today;
};
// เช็คเรื่องการเกษียณ
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
};
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
showLoader();
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
informaData.value.birthDate = birth;
changeRetireText(data.retireDate);
dateBefore.value = birth;
})
.catch((e: any) => {
messageError($q, e);
informaData.value.birthDate = null;
informaData.value.age = "";
})
.finally(() => {
hideLoader();
});
}
};
// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
if (saveDataTest) {
dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
}
});
}
};
// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
const addData = async () => {
const formData = new FormData();
// if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
if (informaData.value.cardid != undefined)
formData.append("citizenId", informaData.value.cardid);
if (informaData.value.prefixId != undefined)
formData.append("prefixId", informaData.value.prefixId);
if (informaData.value.firstname != undefined)
formData.append("firstName", informaData.value.firstname);
if (informaData.value.lastname != undefined)
formData.append("lastName", informaData.value.lastname);
if (informaData.value.genderId != undefined)
formData.append("genderId", informaData.value.genderId);
if (informaData.value.nationality != undefined)
formData.append("nationality", informaData.value.nationality);
if (informaData.value.ethnicity != undefined)
formData.append("race", informaData.value.ethnicity);
if (informaData.value.religionId != undefined)
formData.append("religionId", informaData.value.religionId);
if (informaData.value.birthDate != undefined)
formData.append(
"birthDate",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
if (informaData.value.bloodId != undefined)
formData.append("bloodGroupId", informaData.value.bloodId);
if (informaData.value.statusId != undefined)
formData.append("relationshipId", informaData.value.statusId);
if (informaData.value.tel != undefined)
formData.append("telephoneNumber", informaData.value.tel);
if (informaData.value.employeeType != undefined)
formData.append("employeeType", informaData.value.employeeType);
if (informaData.value.employeeClass != undefined)
formData.append("employeeClass", informaData.value.employeeClass);
showLoader();
await http
.post(config.API.profileEmployeeIn, formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await changeBirth(informaData.value.birthDate ?? new Date());
await clickBack();
hideLoader();
});
hideLoader();
};
// ปุ่ม back
const clickBack = () => {
router.push("/registry-temp");
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
<q-form ref="myform" class="col-12 q-pt-md">
<div class="row">
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
hide-bottom-space
outlined
v-model="informaData.cardid"
dense
@update:model-value="changeCardID"
for="#cardId"
lazy-rules
:rules="[
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val: string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
label="เลขประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
for="#prefixId"
hide-bottom-space
outlined
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
dense
lazy-rules
v-model="informaData.prefixId"
emit-value
map-options
option-label="name"
:options="Ops.prefixOps"
option-value="id"
:label="`${'คำนำหน้าชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
for="#firstname"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.firstname"
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
for="#lastname"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.lastname"
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker
v-model="informaData.birthDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="calculateMaxDate()"
@update:model-value="calRetire"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="#birthDate"
hide-bottom-space
outlined
dense
:model-value="
informaData.birthDate == null
? null
: date2Thai(informaData.birthDate)
"
:rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
hide-bottom-space
dense
lazy-rules
readonly
borderless
style="padding: 0 12px"
:model-value="informaData.age"
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
for="#genderId"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.genderId"
emit-value
map-options
option-label="name"
:options="Ops.genderOps"
option-value="id"
:label="`${'เพศ'}`"
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
)"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
for="#statusId"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.statusId"
emit-value
map-options
option-label="name"
:options="Ops.statusOps"
option-value="id"
:label="`${'สถานภาพ'}`"
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
)"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
for="#nationality"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.nationality"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
for="#ethnicity"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`"
/>
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
for="#religionId"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.religionId"
emit-value
map-options
option-label="name"
:options="Ops.religionOps"
option-value="id"
:label="`${'ศาสนา'}`"
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
)"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
for="#bloodId"
hide-bottom-space
outlined
dense
lazy-rules
v-model="informaData.bloodId"
emit-value
map-options
option-label="name"
:options="Ops.bloodOps"
option-value="id"
:label="`${'หมู่เลือด'}`"
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
)"
clearable
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
for="#tel"
hide-bottom-space
outlined
dense
lazy-rules
type="tel"
v-model="informaData.tel"
:label="`${'เบอร์โทร'}`"
:rules="[
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val: string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
mask="##########"
/>
</div>
</div>
</div>
</q-form>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<div class="row col-12">
<q-space />
<q-btn
for="#submitForm"
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="saveData"
/>
</div>
</q-card>
<!-- Header -->
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img
v-if="image == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<img :src="image" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="addNewImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
for="#profile"
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
<!-- End Header -->
</template>

79
src/modules/08_registryEmployee/components/DialogAddEmployee.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { ref, watch, reactive } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -36,35 +36,39 @@ const props = defineProps({
});
const formData = reactive<FormDataEmployee>({
citizenId: "",
prefix: "",
rank: "",
firstName: "",
lastName: "",
birthDate: null,
gender: "",
relationship: "",
nationality: "",
ethnicity: "",
religion: "",
bloodGroup: "",
phone: "",
citizenId: "", //เลขประจำตัวประชาชน
prefix: "", //คำนำหน้าชื่อ
rank: "", //ยศ
firstName: "", //ชื่อ
lastName: "", //นามสกุล
birthDate: null, //วัน/เดือน/ปี เกิด
gender: "", //เพศ
relationship: "", //สถานภาพ
nationality: "", //สัญชาติ
ethnicity: "", //เชื้อชาติ
religion: "", //ศาสนา
bloodGroup: "", //หมู่เลือด
phone: "", //เบอร์โทร
employeeClass: "TEMP",
});
const prefixOpsMain = ref<DataOption[]>([]);
const prefixOps = ref<DataOption[]>([]);
const rankOpsMain = ref<DataOption[]>([]);
const rankOps = ref<DataOption[]>([]);
const genderOpsMain = ref<DataOption[]>([]);
const genderOps = ref<DataOption[]>([]);
const statusOpsMain = ref<DataOption[]>([]);
const statusOps = ref<DataOption[]>([]);
const religionOpsMain = ref<DataOption[]>([]);
const religionOps = ref<DataOption[]>([]);
const bloodOpsMain = ref<DataOption[]>([]);
const bloodOps = ref<DataOption[]>([]);
//ตัวเลือก
const prefixOpsMain = ref<DataOption[]>([]); //คำนำหน้าชื่อ
const prefixOps = ref<DataOption[]>([]); //คำนำหน้าชื่อ
const rankOpsMain = ref<DataOption[]>([]); //ยศ
const rankOps = ref<DataOption[]>([]); //ยศ
const genderOpsMain = ref<DataOption[]>([]); //เพศ
const genderOps = ref<DataOption[]>([]); //เพศ
const statusOpsMain = ref<DataOption[]>([]); //สถานภาพ
const statusOps = ref<DataOption[]>([]); //สถานภาพ
const religionOpsMain = ref<DataOption[]>([]); // ศาสนา
const religionOps = ref<DataOption[]>([]); //ศาสนา
const bloodOpsMain = ref<DataOption[]>([]); //หมู่เลือด
const bloodOps = ref<DataOption[]>([]); //หมู่เลือด
/**
* ฟังก์ชันดึงข้อมูลเกี่ยวกับข้อมูลส่วนตัว
*/
function fetchDataPerson() {
showLoader();
http
@ -134,6 +138,10 @@ function fetchDataPerson() {
});
}
/**
* ฟังก์ชันเช็คเลขบัตรประจำตัวซ้ำ
* @param citizenId เลขบัตรประจำตัว
*/
function changeCardID(citizenId: string | number | null) {
if (citizenId != null && typeof citizenId == "string") {
if (citizenId.length == 13 && citizenId) {
@ -153,7 +161,13 @@ function changeCardID(citizenId: string | number | null) {
}
}
const filterSelector = (val: string, update: Function, refData: string) => {
/**
* function ค้นหาข้อมูล Option
* @param val คำค้นหา
* @param update function
* @param refData ประเภท
*/
function filterSelector(val: string, update: Function, refData: string) {
switch (refData) {
case "prefix":
update(() => {
@ -207,14 +221,20 @@ const filterSelector = (val: string, update: Function, refData: string) => {
default:
break;
}
};
}
/**
* ฟังก์ชันคำนวนอายุ
*/
function calculateMaxDate() {
const today = new Date();
today.setFullYear(today.getFullYear() - 18);
return today;
}
/**
* ฟังก์ชันบันทึกข้อมูลลูกจ้างชั่วคราว
*/
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
@ -232,6 +252,9 @@ function onSubmit() {
});
}
/**
* ฟังก์ชันปืด popup
*/
function closeDialog() {
modal.value = false;
formData.citizenId = "";

54
src/modules/08_registryEmployee/components/DialogSelectPos.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import { ref, reactive, watch, onBeforeMount, onMounted } from "vue";
import { ref, watch, onBeforeMount } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useStructureTree } from "@/stores/structureTree";
import http from "@/plugins/http";
import config from "@/app.config";
@ -17,10 +19,6 @@ import type {
/** importComponents*/
import Header from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useStructureTree } from "@/stores/structureTree";
/** use*/
const $q = useQuasar();
const { fetchStructureTree } = useStructureTree();
@ -48,16 +46,16 @@ const props = defineProps({
});
/** Tree*/
const nodeId = ref<string>("");
const nodeLevel = ref<number>(0);
const filterTree = ref<string>("");
const nodes = ref<Array<TreeMain>>([]);
const nodeId = ref<string>(""); //id หน่วยงาน/ส่วนราชการ
const nodeLevel = ref<number>(0); // ระดับ หน่วยงาน/ส่วนราชการ
const filterTree = ref<string>(""); //คำค้นหาหน่วยงาน/ส่วนราชการ
const nodes = ref<Array<TreeMain>>([]); //ข้อมูล โครงสร้าง
const lazy = ref(nodes);
const expanded = ref<string[]>([]);
/** Table*/
const filters = ref<string>("");
const rowsPosition = ref<Position[]>([]);
const filters = ref<string>(""); // ค้นหาตำแหน่ง
const rowsPosition = ref<Position[]>([]); //รายการตำแหน่ง
const columns = ref<QTableProps["columns"]>([
{
name: "isPosition",
@ -198,12 +196,12 @@ const visibleColumns = ref<string[]>([
]);
/** Position*/
const positionNo = ref<PositionNo[]>([]);
const positionId = ref<string>("");
const seletcId = ref<string>("");
const selectedPos = ref<any[]>([]);
const positionNo = ref<PositionNo[]>([]); //รายการตำแหน่ง
const positionId = ref<string>(""); //id ตำแหน่ง
const seletcId = ref<string>(""); // id ที่ตเ้องการ
const selectedPos = ref<any[]>([]); //ตำแหน่ง ที่ต้องการ
const datePos = ref<Date>(new Date());
const posMasterMain = ref<any>([]);
const posMasterMain = ref<any>([]); //รายการตำแหน่ง
const orgRevisionId = ref<string>("");
const isLoad = ref<boolean>(false);
/**
@ -322,7 +320,9 @@ async function fetchPosFind(level: number, id: string) {
});
}
/** function บันทึกข้อมูลตำแหน่ง*/
/**
* function บันทึกข้อมูลตำแหน่ง
*/
async function onClickSubmit() {
const dataPosMaster = await posMasterMain.value?.find(
(e: any) => e.id === positionId.value
@ -365,13 +365,17 @@ async function onClickSubmit() {
}
}
/** function closePopup*/
/**
* function closePopup
*/
function closePopup() {
modal.value = !modal.value;
clearData();
}
/** function clearData*/
/**
* function clearData
*/
async function clearData() {
nodeId.value = "";
expanded.value = [];
@ -392,6 +396,10 @@ function filterItemsTaps(data: any[]) {
return orgTreeIds;
}
/**
* function เลือกตำแหน่ง
* @param id ที่ต้องการ
*/
async function onClickSelectPos(id: string) {
positionId.value = id;
selectedPos.value = [];
@ -425,6 +433,9 @@ watch(
}
);
/**
* ทำงานเมื่อเลือก แสดงตำแหน่งทั้งหมด
*/
watch(
() => isAll.value,
(value, oldVal) => {
@ -434,6 +445,9 @@ watch(
}
);
/**
* ทำงานเมื่อเลือก แสดงเฉพาะตำแหน่งว่าง
*/
watch(
() => isBlank.value,
(value, oldVal) => {

29
src/modules/08_registryEmployee/components/DialogSendOrder.vue
View file

@ -1,8 +1,11 @@
<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
/** importType*/
import type { QTableProps } from "quasar";
@ -11,10 +14,6 @@ import type { DataEmployee } from "@/modules/08_registryEmployee/interface/respo
/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";
/** inportStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
const $q = useQuasar();
const {
success,
@ -36,9 +35,9 @@ const props = defineProps({
},
});
const filter = ref<string>("");
const rows = ref<DataEmployee[]>([]);
const selected = ref<DataEmployee[]>([]);
const filter = ref<string>(""); //ค้นหารายชื่อไปออกคำสั่ง
const rows = ref<DataEmployee[]>([]); //รายชื่อไปออกคำสั่ง
const selected = ref<DataEmployee[]>([]); //รายชื่อที่เลือกไปออกคำสั่ง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -165,6 +164,9 @@ const visibleColumns = ref<String[]>([
"statustext",
]);
/**
* ฟังก์ชันยืนยันการส่งออกคำสั่ง
*/
function onClickSendOrder() {
if (selected.value.length == 0) {
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
@ -200,6 +202,9 @@ function onClickSendOrder() {
}
}
/**
* ฟังก์ชันดึงข้อมูลราชชื่อส่งออกคำสั่ง
*/
function fetchList() {
showLoader();
http
@ -215,11 +220,19 @@ function fetchList() {
});
}
/**
* ฟังก์ชันปิด Popup
*/
function closeDialog() {
modal.value = false;
selected.value = [];
}
/**
* ทำเมื่อ modal เป็น true
*
* ทำการเรียก fetchList เพื่อข้อมูลราชชื่อส่งออกคำสั่ง
*/
watch(
() => modal.value,
() => {

476
src/modules/08_registryEmployee/components/DialogSendToCommand.vue
View file

@ -1,476 +0,0 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import type { FormRegistryEmployee } from "../interface/request/Main";
import { useQuasar, type QTableProps, QInput } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
dialogMessageNotify,
} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
const $q = useQuasar();
const props = defineProps({
modal: {
type: Boolean,
default: false,
},
rows: {
type: Object,
default: [],
},
fetchNewList: {
type: Function,
default: () => {
/* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */
},
},
closeDialog: {
type: Function,
default: () => {
/* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */
},
},
});
const filter = ref<string>("");
const filterRef = ref<QInput>();
// visible columns ตารางใน dialog ส่งไปออกคำสั่ง
const visibleColumnsOrder = ref<string[]>([
"no",
"fullname",
"fullnameOld",
"oc",
"positionEmployeePosition",
"positionEmployeePositionSide",
"positionLine",
"govAge",
"positionEmployeeGroup",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
"statustext",
"leaveDateOrder",
"newAgency",
"currentAgency",
]);
// คอลัมน์ในตาราง
const columnsOrder = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "newAgency",
align: "left",
label: "หน่วยงานที่รับการบรรจุ",
sortable: true,
field: "newAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "currentAgency",
align: "left",
label: "หน่วยงานปัจจุบัน",
sortable: true,
field: "currentAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "amount",
align: "left",
label: "ค่าจ้าง",
sortable: true,
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "govAge",
align: "left",
label: "อายุราชการ(ปี)",
sortable: true,
field: "govAge",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "dateAppoint",
align: "left",
label: "วันที่จ้าง",
sortable: true,
field: "dateAppoint",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateStart",
align: "left",
label: "วันที่เริ่มปฎิบัติราชการ",
sortable: true,
field: "dateStart",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salaryDate",
align: "left",
label: "วันที่แต่งตั้ง",
sortable: true,
field: "salaryDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "refSalary",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "refSalary",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "age",
align: "left",
label: "อายุ",
sortable: true,
field: "age",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "fullnameOld",
align: "left",
label: "ชื่อ-นามสกุล(เดิม)",
sortable: true,
field: "fullnameOld",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "leaveDateOrder",
align: "left",
label: "วันที่พ้นราชการ",
sortable: true,
field: "leaveDateOrder",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statustext",
align: "left",
label: "สถานะ",
sortable: true,
field: "statustext",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
// checkbox เลือกคนไปออกคำสั่ง
const selected = ref<any>([]);
const save = () => {
if (selected.value.length == 0) {
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
} else dialogConfirm($q, () => sendToCommand());
};
// post ส่งไปออกคำสั่ง
const sendToCommand = async () => {
let pId: string[] = [];
selected.value.forEach((e: any) => {
pId.push(e.id);
});
let data = {
id: pId,
};
showLoader();
await http
.post(config.API.organizationEmployeeSendOrder, data)
.then(async () => {
await props.fetchNewList();
await success($q, "บันทึกสำเร็จ");
props.closeDialog();
selected.value = [];
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
// เลือกรายการเฉพาะคนที่มีสถานะ PENDING (เลือกตำแหน่งแล้ว)
const rowsOrder = ref<FormRegistryEmployee[]>([]);
const filterRowData = () => {
rowsOrder.value = props.rows.filter(
(r: FormRegistryEmployee) => r.status == "PENDING"
);
};
// เช็ค props modal ทำการ filter เมื่อคลิก icon ส่งไปออกคำสั่ง
watch(props, () => {
if (props.modal === true && props.rows) {
filterRowData();
visibleColumnsOrder.value = [
"no",
"fullname",
"fullnameOld",
"oc",
"positionEmployeePosition",
"positionEmployeePositionSide",
"positionLine",
"govAge",
"positionEmployeeGroup",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
"statustext",
"leaveDateOrder",
"newAgency",
"currentAgency",
];
}
});
</script>
<template>
<q-dialog v-model="props.modal">
<q-card style="width: 900px; max-width: 80vw">
<DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
<q-separator />
<q-card-section class="q-pt-none">
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
ref="filterRef"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumnsOrder"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columnsOrder"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:rows="rowsOrder"
:columns="columnsOrder"
:visible-columns="visibleColumnsOrder"
:filter="filter"
row-key="id"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="newAgency" :props="props">
<div
class="col-12"
v-if="
props.row.draftOrganizationOrganization == null &&
props.row.draftPositionEmployee == null
"
>
<div class="text-weight-medium">
{{ "-" }}
</div>
</div>
<div class="col-12" v-else>
<div class="text-weight-medium">
{{ props.row.draftOrganizationOrganization ?? "-" }}
</div>
<div class="text-weight-light">
{{ props.row.draftPositionEmployee ?? "-" }}
</div>
</div>
</q-td>
<q-td key="currentAgency" :props="props">
<div
class="col-12"
v-if="props.row.oc == null && props.row.position == null"
>
<div class="text-weight-medium">
{{ "-" }}
</div>
</div>
<div class="col-12" v-else>
<div class="text-weight-medium">
{{ props.row.oc ?? "-" }}
</div>
<div class="text-weight-light">
{{ props.row.position ?? "-" }}
</div>
</div>
</q-td>
<q-td key="amount" :props="props">
{{ props.row.amount }}
</q-td>
<q-td key="govAge" :props="props">
{{ props.row.govAge }}
</q-td>
<q-td key="dateAppoint" :props="props">
{{ props.row.dateAppoint }}
</q-td>
<q-td key="dateStart" :props="props">
{{ props.row.dateStart }}
</q-td>
<q-td key="salaryDate" :props="props">
{{ props.row.salaryDate }}
</q-td>
<q-td key="refSalary" :props="props">
{{ props.row.refSalary }}
</q-td>
<q-td key="age" :props="props">
{{ props.row.age }}
</q-td>
<q-td key="fullnameOld" :props="props">
{{ props.row.fullnameOld }}
</q-td>
<q-td key="createdAt" :props="props">
{{ props.row.createdAt }}
</q-td>
<q-td key="isLeave" :props="props">
{{ props.row.isLeave }}
</q-td>
<q-td key="leaveDateOrder" :props="props">
{{ props.row.leaveDateOrder }}
</q-td>
<q-td key="statustext" :props="props">
{{ props.row.statustext }}
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
</q-card-actions>
</q-card>
</q-dialog>
</template>

989
src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
View file

@ -1,989 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registry/store";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Assessment";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
profileType: {
type: String,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const name = ref<string>();
const point1Total = ref<number>();
const point1 = ref<number>();
const point2Total = ref<number>();
const point2 = ref<number>();
const pointSumTotal = ref<number>();
const pointSum = ref<number>();
const date = ref<Date>(new Date());
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.assessment.columns.length == 0
? (visibleColumns.value = [
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
])
: (visibleColumns.value = profileData.assessment.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วันที่ได้รับ",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point1Total",
align: "left",
label: "ส่วนที่1 (คะแนน)",
sortable: true,
field: "point1Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point1",
align: "left",
label: "ผลประเมินส่วนที่1 (คะแนน)",
sortable: true,
field: "point1",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2Total",
align: "left",
label: "ส่วนที่2 (คะแนน)",
sortable: true,
field: "point2Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2",
align: "left",
label: "ผลประเมินส่วนที่2 (คะแนน)",
sortable: true,
field: "point2",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSumTotal",
align: "left",
label: "ผลรวม (คะแนน)",
sortable: true,
field: "pointSumTotal",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSum",
align: "left",
label: "ผลประเมินรวม (คะแนน)",
sortable: true,
field: "pointSum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ผลประเมิน",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "point1Total",
align: "left",
label: "ส่วนที่1 (คะแนน)",
sortable: true,
field: "point1Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point1",
align: "left",
label: "ผลประเมินส่วนที่1 (คะแนน)",
sortable: true,
field: "point1",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2Total",
align: "left",
label: "ส่วนที่2 (คะแนน)",
sortable: true,
field: "point2Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point2",
align: "left",
label: "ผลประเมินส่วนที่2 (คะแนน)",
sortable: true,
field: "point2",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSumTotal",
align: "left",
label: "ผลรวม (คะแนน)",
sortable: true,
field: "pointSumTotal",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "pointSum",
align: "left",
label: "ผลประเมินรวม (คะแนน)",
sortable: true,
field: "pointSum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ผลประเมิน",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "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[]>([
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("assessment", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileAssessmentId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
name: e.name,
point1Total: e.point1Total,
point1: e.point1,
point2Total: e.point2Total,
point2: e.point2,
pointSumTotal: e.pointSumTotal,
pointSum: e.pointSum,
date: new Date(e.date),
createdAt: new Date(e.createdAt),
createdFullName: e.createdFullName,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
name.value = row.name;
point1Total.value = row.point1Total;
point1.value = row.point1;
point2Total.value = row.point2Total;
point2.value = row.point2;
pointSumTotal.value = row.pointSumTotal;
pointSum.value = row.pointSum;
date.value = row.date;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = () => {
dialogConfirm($q, () => SaveData());
};
const SaveData = async () => {
await myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileAssessmentId(profileId.value), {
id: id.value,
name: name.value,
point1Total: point1Total.value,
point1: point1.value,
point2Total: point2Total.value,
point2: point2.value,
pointSumTotal: pointSumTotal.value,
pointSum: pointSum.value,
date: dateToISO(date.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileAssessmentId(id.value), {
id: id.value,
name: name.value,
point1Total: point1Total.value,
point1: point1.value,
point2Total: point2Total.value,
point2: point2.value,
pointSumTotal: pointSumTotal.value,
pointSum: pointSum.value,
date: dateToISO(date.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileAssessmentId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
name.value = props.row.name;
point1Total.value = props.row.point1Total;
point1.value = props.row.point1;
point2Total.value = props.row.point2Total;
point2.value = props.row.point2;
pointSumTotal.value = props.row.pointSumTotal;
pointSum.value = props.row.pointSum;
date.value = props.row.date;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
name.value = "";
point1Total.value = 0;
point1.value = 0;
point2Total.value = 0;
point2.value = 0;
pointSumTotal.value = 0;
pointSum.value = 0;
date.value = new Date();
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileAssessmentHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
name: e.name,
point1Total: e.point1Total,
point1: e.point1,
point2Total: e.point2Total,
point2: e.point2,
pointSumTotal: e.pointSumTotal,
pointSum: e.pointSum,
date: new Date(e.date),
createdAt: new Date(e.createdAt),
createdFullName: e.createdFullName,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
// const validateData = async () => {
// checkValidate.value = true;
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
// };
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const textRangePoint = (val: number | undefined) => {
if (val == undefined) val = -1;
if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
else return "";
};
const textPoint = (val: number | undefined) => {
if (val == undefined) val = -1;
if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
if (val >= 60 && val <= 69) return "พอใช้";
if (val >= 70 && val <= 79) return "ดี";
if (val >= 80 && val <= 89) return "ดีมาก";
if (val >= 90 && val <= 100) return "ดีเด่น";
else return "-";
};
</script>
<!-- card ผลการประเมินการปฏิบัติราชการ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-pa-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ผลการประเมินการปฏิบัติราชการ"
icon="mdi-clipboard-text"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
tittle="ผลการประเมินการปฏิบัติราชการ"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
hide-bottom-space
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<!-- <div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point"
:rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
hide-bottom-space
:label="`${'คะแนน'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div> -->
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSumTotal"
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
hide-bottom-space
:label="`${'ผลรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSum"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="text-subtitle2 col-12 row items-center">
<q-space></q-space>
ผลการประเมิน:
<div class="text-bold items-center q-px-sm">
{{ textPoint(pointSum) }}
</div>
{{ textRangePoint(pointSum) }}
</div>
<!-- <div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
hide-bottom-space
:label="`${'ชื่อแบบประเมิน'}`"
@update:modelValue="clickEditRow"
/>
</div> -->
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

950
src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
View file

@ -1,950 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registry/store";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Discipline";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Discipline";
import type {
DisciplineOps,
DataOption,
} from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const level = ref<string>();
const Ops = ref<DisciplineOps>({
levelOptions: [
{
name: "ภาคทัณฑ์",
id: "ภาคทัณฑ์",
},
{
name: "ตัดเงินเดือน",
id: "ตัดเงินเดือน",
},
{
name: "ลดขั้นเงินเดือน",
id: "ลดขั้นเงินเดือน",
},
{
name: "ปลดออก",
id: "ปลดออก",
},
{
name: "ไล่ออก",
id: "ไล่ออก",
},
],
});
const OpsFilter = ref<DisciplineOps>({
levelOptions: [
{
name: "ภาคทัณฑ์",
id: "ภาคทัณฑ์",
},
{
name: "ตัดเงินเดือน",
id: "ตัดเงินเดือน",
},
{
name: "ลดขั้นเงินเดือน",
id: "ลดขั้นเงินเดือน",
},
{
name: "ปลดออก",
id: "ปลดออก",
},
{
name: "ไล่ออก",
id: "ไล่ออก",
},
],
});
const detail = ref<string>();
const unStigma = ref<string>();
const refCommandNo = ref<string>();
const refCommandDate = ref<Date | null>(new Date());
const date = ref<Date>(new Date());
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขวินัย"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.discipline.columns.length == 0
? (visibleColumns.value = [
"level",
"detail",
"unStigma",
"refCommandNo",
"refCommandDate",
"date",
])
: (visibleColumns.value = profileData.discipline.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วัน เดือน ปี",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
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: "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: "unStigma",
align: "left",
label: "ล้างมลทิน",
sortable: true,
field: "unStigma",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandDate",
align: "left",
label: "เอกสารอ้างอิง (ลงวันที่)",
sortable: true,
field: "refCommandDate",
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: "date",
align: "left",
label: "วัน เดือน ปี",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
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: "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: "unStigma",
align: "left",
label: "ล้างมลทิน",
sortable: true,
field: "unStigma",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandDate",
align: "left",
label: "เอกสารอ้างอิง (ลงวันที่)",
sortable: true,
field: "refCommandDate",
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[]>([
"level",
"detail",
"unStigma",
"refCommandNo",
"refCommandDate",
"date",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("discipline", count);
});
onMounted(async () => {
await fetchData();
});
const filterSelector = (val: string, update: Function, refData: string) => {
switch (refData) {
case "levelOptions":
update(() => {
Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileDisId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
level: e.level,
detail: e.detail,
unStigma: e.unStigma,
refCommandNo: e.refCommandNo,
refCommandDate:
e.refCommandDate == null ? null : new Date(e.refCommandDate),
date: new Date(e.date),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
level.value = row.level;
detail.value = row.detail;
unStigma.value = row.unStigma;
refCommandNo.value = row.refCommandNo;
refCommandDate.value = row.refCommandDate;
date.value = row.date;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = () => {
dialogConfirm($q, () => SaveData());
};
const SaveData = async () => {
await myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileDisId(profileId.value), {
id: id.value,
level: level.value,
detail: detail.value,
unStigma: unStigma.value,
refCommandNo: refCommandNo.value,
refCommandDate:
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
date: dateToISO(date.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileDisId(id.value), {
id: id.value,
level: level.value,
detail: detail.value,
unStigma: unStigma.value,
refCommandNo: refCommandNo.value,
refCommandDate:
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
date: dateToISO(date.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileDisId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
level.value = props.row.level;
detail.value = props.row.detail;
unStigma.value = props.row.unStigma;
refCommandNo.value = props.row.refCommandNo;
refCommandDate.value = props.row.refCommandDate;
date.value = props.row.date;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
level.value = "";
detail.value = "";
unStigma.value = "";
refCommandNo.value = "";
refCommandDate.value = null;
date.value = new Date();
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileDisHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
level: e.level,
detail: e.detail,
unStigma: e.unStigma,
refCommandNo: e.refCommandNo,
refCommandDate:
e.refCommandDate == null ? null : new Date(e.refCommandDate),
date: new Date(e.date),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
// const validateData = async () => {
// checkValidate.value = true;
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
// };
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const resetFilter = () => {};
</script>
<!-- card วินัย -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="วินัย"
icon="mdi-scale-balance"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'refCommandDate' || col.name == 'date'"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="วินัย" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
hide-bottom-space
:label="`${'วัน เดือน ปี'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="level"
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
hide-bottom-space
:label="`${'ระดับการลงโทษทางวินัย'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="Ops.levelOptions"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="unStigma"
hide-bottom-space
:label="`${'ล้างมลทิน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'date' ||
col.name == 'refCommandDate' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

300
src/modules/08_registryEmployee/components/EditEmployee/Document.vue
View file

@ -1,300 +0,0 @@
<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
notiNoEdit: {
type: Function,
default: () => console.log("not function"),
},
statusAdd: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:statusEdit"]);
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const route = useRoute();
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const edit = ref<boolean>(false);
const uploader = ref<any>();
const files = ref<any>([]);
const file = ref<any>([]);
const name = ref<string>("");
const myform = ref<QForm | null>(null);
onMounted(async () => {
await getData();
});
const getData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profilePaperId(profileId.value))
.then((res) => {
const data = res.data.result;
files.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const deleteData = async (id: string) => {
showLoader();
await http
.delete(config.API.profilePaperId(id))
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
});
};
const uploadData = () => {
dialogConfirm($q, () => Datasave());
};
const Datasave = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
if (props.statusAdd) {
// await addData();
} else {
await Dataupload();
}
} else {
}
});
}
};
const onCancel = async () => {
if (myform.value != null) {
myform.value.reset();
}
await getData();
};
const Dataupload = async () => {
if (profileId.value) {
if (file.value.length > 0) {
const blob = file.value.slice(0, file.value[0].size);
const newFile = new File(blob, name.value, {
type: file.value[0].type,
});
const formData = new FormData();
formData.append("avatar", newFile);
formData.append("moss", "newFile");
showLoader();
await http
.post(config.API.profilePaperId(profileId.value), formData)
.then((res) => {
const data = res.data.result;
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
uploader.value.reset();
name.value = "";
edit.value = false;
emit("update:statusEdit", false);
await getData();
});
} else {
// modalError(
// $q,
// "ไม่สามารถอัปโหลดไฟล์ได้",
// "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
// );
getData();
}
}
};
const fileAdd = async (val: any) => {
name.value = val[0].name;
file.value = val;
};
const downloadData = async (path: string) => {
window.open(path);
};
const changeBtn = async () => {
name.value = "";
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
</script>
<template>
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
<q-form ref="myform" class="col-12">
<HeaderTop
v-model:edit="edit"
header="เอกสารหลักฐาน"
icon="mdi-file-document"
:history="false"
:changeBtn="changeBtn"
:cancel="onCancel"
:disable="statusEdit"
:save="uploadData"
/>
<div class="row col-12 q-pt-sm">
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="row col-12">
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="blue"
icon="mdi-download-outline"
@click="downloadData(file.file)"
/>
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-show="edit"
@click="deleteData(file.id)"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<q-input
v-if="edit"
class="q-mt-sm col-12 q-pb-xs"
outlined
dense
lazy-rules
v-model="name"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
@factory="uploadData"
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-form>
</q-card>
</template>

1572
src/modules/08_registryEmployee/components/EditEmployee/Education.vue
View file

File diff suppressed because it is too large Load diff

625
src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
View file

@ -1,625 +0,0 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { QTableProps } from "quasar";
import type {
FormEmployment,
FormEmploymentRef,
EmploymentList,
Respones,
} from "@/modules/08_registryEmployee/interface/response/Main";
const $q = useQuasar();
const route = useRoute();
const maxin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
dialogRemove,
success,
messageError,
hideLoader,
showLoader,
} = maxin;
const profileId = ref<string>(route.params.id.toString());
const rows = ref<EmploymentList[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "dateEmployment",
align: "left",
label: "วันที่จ้าง",
sortable: false,
field: "dateEmployment",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderEmployment",
align: "left",
label: "คำสั่งจ้าง",
sortable: false,
field: "orderEmployment",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>(["dateEmployment", "orderEmployment"]);
const filter = ref<string>();
onMounted(async () => {
await fetchList();
});
async function fetchList() {
showLoader();
await http
.get(config.API.employmentId(profileId.value))
.then((res) => {
const data = res.data.result;
const list: EmploymentList[] = data.map((e: Respones) => ({
id: e.id,
orderEmployment: e.command,
dateEmployment: date2Thai(e.date),
dataISO: e.date,
}));
rows.value = list;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
// เพิ่มข้อมูลการจ้าง
const modal = ref<boolean>(false);
const formData = reactive<FormEmployment>({
dateEmployment: null,
orderEmployment: "",
});
const dateEmploymentRef = ref<object | null>();
const orderEmploymentRef = ref<object | null>();
const formDataRef: FormEmploymentRef = {
dateEmployment: dateEmploymentRef,
orderEmployment: orderEmploymentRef,
};
function onClickAdd() {
modal.value = true;
actions.value = "";
formData.dateEmployment = null;
formData.orderEmployment = "";
}
function colsePopup() {
modal.value = false;
modalHistory.value = false;
}
// validateForm
function validateForm() {
const hasError = [];
for (const key in formDataRef) {
if (Object.prototype.hasOwnProperty.call(formDataRef, key)) {
const property = formDataRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
console.log(formData);
if (actions.value == "edit") {
onSubmitEdit();
} else onSubmit();
} else {
console.log("ไม่ผ่าน ");
}
}
// การเพิ่ม
function onSubmit() {
dialogConfirm(
$q,
async () => {
const data = {
command: formData.orderEmployment,
date: formData.dateEmployment,
};
await http
.post(config.API.employmentId(profileId.value), data)
.then(async () => {
await fetchList();
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
colsePopup();
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
// การลบ
function cilckDelete(id: string) {
dialogRemove(
$q,
async () => {
await http
.delete(config.API.employmentId(id))
.then(async () => {
await fetchList();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
});
},
"ยืนยันการลบข้อมูล",
"ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
);
}
// การแก้ไข
const actions = ref<string>("");
const employmentRowId = ref<string>("");
function clickEdit(data: any, actionstype: string) {
modal.value = true;
actions.value = actionstype;
employmentRowId.value = data.id;
formData.dateEmployment = data.dataISO;
formData.orderEmployment = data.orderEmployment;
}
function onSubmitEdit() {
dialogConfirm(
$q,
async () => {
const data = {
command: formData.orderEmployment,
date: formData.dateEmployment,
};
await http
.put(config.API.employmentId(employmentRowId.value), data)
.then(async () => {
await fetchList();
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
colsePopup();
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
// ประวัติการแก้ไข
const modalHistory = ref<boolean>(false);
const rowsHis = ref<EmploymentList[]>([]);
const columnsHis = ref<QTableProps["columns"]>([
{
name: "dateEmployment",
align: "left",
label: "วันที่จ้าง",
sortable: false,
field: "dateEmployment",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderEmployment",
align: "left",
label: "คำสั่งจ้าง",
sortable: false,
field: "orderEmployment",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
// {
// name: "createdFullName",
// align: "left",
// label: "ผู้สร้าง",
// sortable: false,
// field: "createdFullName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "createdAt",
// align: "left",
// label: "วันที่สร้าง",
// sortable: false,
// field: "createdAt",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: false,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: false,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumnsHis = ref<string[]>([
"dateEmployment",
"orderEmployment",
// "createdFullName",
// "createdAt",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const filterHis = ref<string>();
async function openPopupHistory(id: string) {
modalHistory.value = true;
filterHis.value = "";
showLoader();
await http
.get(config.API.employmentHistoryId(id))
.then((res) => {
const data = res.data.result;
const list: EmploymentList[] = data.map((e: Respones) => ({
id: e.id,
orderEmployment: e.command,
dateEmployment: date2Thai(e.date),
createdFullName: e.createdFullName,
createdAt: date2Thai(e.createdAt),
lastUpdateFullName: e.lastUpdateFullName,
lastUpdatedAt: date2Thai(e.lastUpdatedAt),
}));
rowsHis.value = list;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const pagination = ref({
descending: true,
page: 1,
rowsPerPage: 10,
});
const paginationHis = ref({
descending: true,
page: 1,
rowsPerPage: 10,
});
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<div class="flex items-center">
<div class="flex items-center">
<q-icon
name="mdi-clipboard"
size="1.5em"
color="grey-5"
class="q-mr-md"
/>
<div class="text-bold text-subtitle2 col-12 row items-center">
ข้อมูลการจ้าง
</div>
</div>
<div class="q-gutter-sm q-mx-sm">
<q-btn
size="12px"
flat
round
color="primary"
@click="onClickAdd"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
</q-btn>
</div>
<q-space />
<div class="q-gutter-sm" style="display: flex">
<q-input
outlined
dense
v-model="filter"
label="ค้นหา"
style="min-width: 150px"
/>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</div>
<div class="q-mt-sm">
<d-table
flat
bordered
id="table"
ref="table"
:columns="columns"
:rows="rows"
:filter="filter"
row-key="dateEmployment"
:paging="true"
dense
:visible-columns="visibleColumns"
v-model:pagination="pagination"
>
<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-th>
<q-th auto-width></q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" style="height: 40px">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
{{ col.value }}
</div>
</q-td>
<q-td>
<q-btn
dense
flat
round
color="primary"
icon="mdi-pencil"
@click="clickEdit(props.row, 'edit')"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn
dense
flat
round
color="red"
icon="mdi-delete"
@click="cilckDelete(props.row.id)"
>
<q-tooltip>ลบข้อมูล</q-tooltip></q-btn
>
</q-td>
<q-td>
<q-btn
dense
flat
round
color="info"
@click="openPopupHistory(props.row.id)"
icon="mdi-history"
>
<q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
<q-dialog v-model="modal">
<q-card style="width: 700px; max-width: 80vw">
<q-toolbar>
<q-toolbar-title class="text-subtitle1 text-weight-bold">
<span style="margin-right: 0" v-if="actions == 'edit'">
แก้ข้อมูลการจ้าง
</span>
<span style="margin-right: 0" v-else> เพิ่มข้อมูลการจ้าง </span>
</q-toolbar-title>
<q-btn
for="closeDialog"
icon="close"
unelevated
round
dense
style="color: #eb0505; background-color: #ffdede"
@click="colsePopup"
/>
</q-toolbar>
<q-separator />
<form @submit.prevent="validateForm">
<q-card-section class="q-pt-none">
<div class="col-12 row q-pa-md">
<div
class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEmployment"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="inputdateEmployment"
ref="dateEmploymentRef"
outlined
dense
class="full-width datepicker"
:model-value="
formData.dateEmployment != null
? date2Thai(formData.dateEmployment)
: null
"
label="วันที่จ้าง"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
for="inputOrderEmployment"
ref="orderEmploymentRef"
dense
outlined
v-model="formData.orderEmployment"
label="คำสั่งจ้าง"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
lazy-rules
/>
</div>
</div>
</div>
<div class="row col-12">
<q-space />
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
for="ButtonOnSubmit"
id="onSubmit"
flat
round
color="secondary"
icon="mdi-content-save-outline"
type="submit"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</form>
</q-card>
</q-dialog>
<q-dialog v-model="modalHistory">
<q-card style="width: 800px; max-width: 80vw">
<q-toolbar>
<q-toolbar-title class="text-subtitle1 text-weight-bold">
<span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
</q-toolbar-title>
<q-btn
for="closeDialog"
icon="close"
unelevated
round
dense
style="color: #eb0505; background-color: #ffdede"
@click="colsePopup"
/>
</q-toolbar>
<q-separator />
<q-card-section class="q-pt-none q-mt-sm">
<q-toolbar class="q-pa-none">
<q-space />
<div class="q-gutter-sm" style="display: flex">
<q-input
outlined
dense
v-model="filterHis"
label="ค้นหา"
style="min-width: 150px"
/>
<q-select
v-model="visibleColumnsHis"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columnsHis"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</q-toolbar>
<d-table
flat
bordered
id="table"
ref="table"
:columns="columnsHis"
:rows="rowsHis"
:filter="filterHis"
row-key="dateEmployment"
:paging="true"
dense
:visible-columns="visibleColumnsHis"
v-model:pagination="paginationHis"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" style="height: 40px">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped></style>

909
src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
View file

@ -1,909 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
Address,
DataOption,
zipCodeOption,
} from "@/modules/04_registry/components/profileType";
import { defaultAddress } from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Address";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Address";
import HistoryTable from "@/components/TableHistory.vue";
import { useRoute } from "vue-router";
import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
statusAdd: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const edit = ref<boolean>(false);
const addressData = ref<Address>(defaultAddress);
const myform = ref<any>();
const codep = ref<string>("");
const codec = ref<string>("");
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const Ops = ref<AddressOps>({
provinceOps: [],
districtOps: [],
districtCOps: [],
subdistrictOps: [],
subdistrictCOps: [],
});
const OpsFilter = ref<AddressOps>({
provinceOps: [],
districtOps: [],
districtCOps: [],
subdistrictOps: [],
subdistrictCOps: [],
});
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "registrationAddress",
align: "left",
label: "ที่อยู่ตามทะเบียนบ้าน",
sortable: true,
field: "registrationAddress",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationProvince",
align: "left",
label: "จังหวัดตามทะเบียนบ้าน",
sortable: true,
field: "registrationProvince",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationDistrict",
align: "left",
label: "เขต/อำเภอตามทะเบียนบ้าน",
sortable: true,
field: "registrationDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationSubDistrict",
align: "left",
label: "แขวง/ตำบลตามทะเบียนบ้าน",
sortable: true,
field: "registrationSubDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationZipCode",
align: "left",
label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
sortable: true,
field: "registrationZipCode",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationSame",
align: "left",
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
sortable: true,
field: "registrationSame",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentAddress",
align: "left",
label: "ที่อยู่ปัจจุบัน",
sortable: true,
field: "currentAddress",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentProvince",
align: "left",
label: "จังหวัดปัจจุบัน",
sortable: true,
field: "currentProvince",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentDistrict",
align: "left",
label: "เขต/อำเภอปัจจุบัน",
sortable: true,
field: "currentDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentSubDistrict",
align: "left",
label: "แขวง/ตำบลปัจจุบัน",
sortable: true,
field: "currentSubDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentZipCode",
align: "left",
label: "รหัสไปรษณีย์ปัจจุบัน",
sortable: true,
field: "currentZipCode",
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[]>([
"currentAddress",
"currentDistrict",
"currentProvince",
"currentSubDistrict",
"currentZipCode",
"registrationAddress",
"registrationDistrict",
"registrationProvince",
"registrationSame",
"registrationSubDistrict",
"registrationZipCode",
"createdFullName",
"createdAt",
]);
onMounted(async () => {
await getNewData();
emit("update:statusEdit", false);
defaultAdd();
});
const statusAdd = () => props.statusAdd;
const defaultAdd = () => {
if (props.statusAdd) {
edit.value = props.statusAdd;
addressData.value = {
address: null,
provinceId: null,
districtId: null,
subdistrictId: null,
addressC: null,
provinceIdC: null,
districtIdC: null,
subdistrictIdC: null,
codep: null,
codec: null,
same: "0",
};
}
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "provinceOps":
update(() => {
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "districtOps":
update(() => {
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "districtCOps":
update(() => {
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictOps":
update(() => {
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictCOps":
update(() => {
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileAdrsHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
currentAddress: e.currentAddress,
currentDistrict: e.currentDistrict,
currentProvince: e.currentProvince,
currentSubDistrict: e.currentSubDistrict,
currentZipCode: e.currentZipCode,
registrationSame: e.registrationSame,
registrationAddress: e.registrationAddress,
registrationDistrict: e.registrationDistrict,
registrationProvince: e.registrationProvince,
registrationSubDistrict: e.registrationSubDistrict,
registrationZipCode: e.registrationZipCode,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const refreshData = async () => {
myform.value.reset();
await getNewData();
};
const getNewData = async () => {
await fetchData();
await fetchProvince();
await fetchDistrict(addressData.value.provinceId, "1");
await fetchDistrict(addressData.value.provinceIdC, "2");
await fetchSubDistrict(addressData.value.districtId, "1");
await fetchSubDistrict(addressData.value.districtIdC, "2");
};
const fetchData = async () => {
if (route.params.id) {
showLoader();
await http
.get(config.API.profileAdrsId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject = res.data.result;
addressData.value.address = data.registrationAddress;
addressData.value.addressC = data.currentAddress;
addressData.value.districtId =
data.registrationDistrictId !== "00000000-0000-0000-0000-000000000000"
? data.registrationDistrictId
: "";
addressData.value.districtIdC =
data.currentDistrictId !== "00000000-0000-0000-0000-000000000000"
? data.currentDistrictId
: "";
addressData.value.provinceId =
data.registrationProvinceId !== "00000000-0000-0000-0000-000000000000"
? data.registrationProvinceId
: "";
addressData.value.provinceIdC =
data.currentProvinceId !== "00000000-0000-0000-0000-000000000000"
? data.currentProvinceId
: "";
addressData.value.subdistrictId =
data.registrationSubDistrictId !==
"00000000-0000-0000-0000-000000000000"
? data.registrationSubDistrictId
: "";
addressData.value.subdistrictIdC =
data.currentSubDistrictId !== "00000000-0000-0000-0000-000000000000"
? data.currentSubDistrictId
: "";
addressData.value.same = data.registrationSame ? "1" : "0";
addressData.value.codec = data.currentZipCode;
addressData.value.codep = data.registrationZipCode;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
};
const editData = async () => {
const body: ResponseObject = {
registrationSame: addressData.value.same == "1",
registrationAddress: addressData.value.address,
registrationSubDistrictId: addressData.value.subdistrictId,
registrationDistrictId: addressData.value.districtId,
registrationProvinceId: addressData.value.provinceId,
registrationZipCode: codep.value,
currentAddress:
addressData.value.same == "1"
? addressData.value.address
: addressData.value.addressC,
currentSubDistrictId:
addressData.value.same == "1"
? addressData.value.subdistrictId
: addressData.value.subdistrictIdC,
currentDistrictId:
addressData.value.same == "1"
? addressData.value.districtId
: addressData.value.districtIdC,
currentProvinceId:
addressData.value.same == "1"
? addressData.value.provinceId
: addressData.value.provinceIdC,
currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
createdAt: new Date(),
createdFullName: "-",
};
showLoader();
await http
.put(config.API.profileAdrsId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await getNewData();
});
};
const addData = async () => {
// showLoader();
// await http
// .put(config.API.profileInforId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await fetchData();
// await changeBirth(informaData.value.birthDate ?? new Date());
// });
};
const saveData = async () => {
dialogConfirm($q, () => Datasave());
};
const Datasave = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
if (props.statusAdd) {
await addData();
} else {
await editData();
}
} else {
}
});
};
const selectProvince = async (e: string | null, name: string) => {
if (e != null) {
if (name == "1") {
addressData.value.districtId = "";
addressData.value.subdistrictId = "";
addressData.value.codep = "";
} else {
addressData.value.districtIdC = "";
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
}
myform.value.resetValidation();
await fetchDistrict(e, name);
}
};
const selectDistrict = async (e: string | null, name: string) => {
if (e != null) {
if (name == "1") {
addressData.value.subdistrictId = "";
addressData.value.codep = "";
} else {
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
}
myform.value.resetValidation();
await fetchSubDistrict(e, name);
}
};
const selectSubDistrict = (e: string | null, name: string) => {
if (e != null) {
if (name == "1") {
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
addressData.value.codep = namecode;
} else {
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
addressData.value.codec = namecode;
}
}
};
const fetchProvince = async () => {
showLoader();
await http
.get(config.API.province)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.provinceOps = option;
OpsFilter.value.provinceOps = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchDistrict = async (id: string | null, position: string) => {
if (id != null && id != "") {
showLoader();
await http
.get(config.API.listDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
if (position == "1") {
Ops.value.districtOps = option;
OpsFilter.value.districtOps = option;
} else {
Ops.value.districtCOps = option;
OpsFilter.value.districtCOps = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const fetchSubDistrict = async (id: string | null, position: string) => {
if (id != null && id != "") {
showLoader();
await http
.get(config.API.listSubDistrict(id))
.then((res) => {
const data = res.data.result;
let option: zipCodeOption[] = [];
data.map((r: any) => {
option.push({
id: r.id.toString(),
name: r.name.toString(),
zipCode: r.zipCode.toString(),
});
});
if (position == "1") {
Ops.value.subdistrictOps = option;
OpsFilter.value.subdistrictOps = option;
} else {
Ops.value.subdistrictCOps = option;
OpsFilter.value.subdistrictCOps = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลที่อยู่"
icon="mdi-map-marker"
:save="saveData"
:history="!statusAdd()"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<q-form ref="myform">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.address"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.provinceId"
emit-value
map-options
option-label="name"
:options="Ops.provinceOps"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value:string) => selectProvince(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.districtId"
emit-value
map-options
option-label="name"
:options="Ops.districtOps"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value:string) => selectDistrict(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.subdistrictId"
emit-value
map-options
option-label="name"
:options="Ops.subdistrictOps"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codep"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
<div class="col-12 q-pt-lg"><q-separator /></div>
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
<label class="text-bold"
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="ใช่"
dense
:disable="!edit"
/>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่"
dense
:disable="!edit"
/>
</div>
<div class="col-xs-12" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.addressC"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.provinceIdC"
emit-value
map-options
option-label="name"
:options="Ops.provinceOps"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value:string) => selectProvince(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.districtIdC"
emit-value
map-options
option-label="name"
:options="Ops.districtCOps"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value:string) => selectDistrict(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.subdistrictIdC"
emit-value
map-options
option-label="name"
:options="Ops.subdistrictCOps"
option-value="id"
:label="`${'แขวง / ตำบล '}`"
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codec"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
: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 == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

837
src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
View file

@ -1,837 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Certificate";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Certificate";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
profileType: {
type: String,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const certificateNo = ref<string>();
const issuer = ref<string>();
const issueDate = ref<Date>(new Date());
const expireDate = ref<Date>(new Date());
const certificateType = ref<string>();
const minDate = ref<Date>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขใบอนุญาตประกอบอาชีพ"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.certicate.columns.length == 0
? (visibleColumns.value = [
"certificateType",
"certificateNo",
"issuer",
"issueDate",
"expireDate",
])
: (visibleColumns.value = profileData.certicate.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "certificateType",
align: "left",
label: "ชื่อใบอนุญาต",
sortable: true,
field: "certificateType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "issuer",
align: "left",
label: "หน่วยงานผู้ออกใบอนุญาต",
sortable: true,
field: "issuer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "certificateNo",
align: "left",
label: "เลขที่ใบอนุญาต",
sortable: true,
field: "certificateNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "issueDate",
align: "left",
label: "วันที่ออกใบอนุญาต",
sortable: true,
field: "issueDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "expireDate",
align: "left",
label: "วันที่หมดอายุ",
sortable: true,
field: "expireDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "certificateType",
align: "left",
label: "ชื่อใบอนุญาต",
sortable: true,
field: "certificateType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "issuer",
align: "left",
label: "หน่วยงานผู้ออกใบอนุญาต",
sortable: true,
field: "issuer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "certificateNo",
align: "left",
label: "เลขที่ใบอนุญาต",
sortable: true,
field: "certificateNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "issueDate",
align: "left",
label: "วันที่ออกใบอนุญาต",
sortable: true,
field: "issueDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "expireDate",
align: "left",
label: "วันที่หมดอายุ",
sortable: true,
field: "expireDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
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[]>([
"certificateType",
"certificateNo",
"issuer",
"issueDate",
"expireDate",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("certicate", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileCertId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
certificateNo: e.certificateNo,
issuer: e.issuer,
issueDate: new Date(e.issueDate),
expireDate: new Date(e.expireDate),
certificateType: e.certificateType,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
certificateNo.value = row.certificateNo;
issuer.value = row.issuer;
issueDate.value = row.issueDate;
expireDate.value = row.expireDate;
certificateType.value = row.certificateType;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = () => {
dialogConfirm($q, () => SaveData());
};
const SaveData = async () => {
await myForm.value?.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
showLoader();
await http
.post(config.API.profileCertId(profileId.value), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: dateToISO(issueDate.value),
expireDate: dateToISO(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileCertId(id.value), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: dateToISO(issueDate.value),
expireDate: dateToISO(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileCertId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
modal.value = true; //modal ที่เด้งขึ้นมา
edit.value = false; //ปุ่ม edit ใน modal
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
certificateNo.value = props.row.certificateNo;
issuer.value = props.row.issuer;
issueDate.value = props.row.issueDate;
expireDate.value = props.row.expireDate;
certificateType.value = props.row.certificateType;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
certificateNo.value = "";
issuer.value = "";
issueDate.value = new Date();
expireDate.value = new Date();
certificateType.value = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
tittleHistory.value =
props.profileType == "employee"
? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
: "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileCertHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
certificateNo: e.certificateNo,
issuer: e.issuer,
issueDate: new Date(e.issueDate),
expireDate: new Date(e.expireDate),
certificateType: e.certificateType,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
// const validateData = async () => {
// checkValidate.value = true;
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
// };
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<!-- card ใบอนุญาตประกอบอาชีพ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:name="
profileType == 'employee'
? 'ใบอนุญาตของลูกจ้าง'
: 'ใบอนุญาตประกอบอาชีพ'
"
icon="mdi-book"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'issueDate' || col.name == 'expireDate'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
:tittle="
profileType == 'employee'
? 'ใบอนุญาตของลูกจ้าง'
: 'ใบอนุญาตประกอบอาชีพ'
"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="certificateType"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
hide-bottom-space
:label="`${'ชื่อใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="issuer"
:rules="[
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
]"
hide-bottom-space
:label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="certificateNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
hide-bottom-space
:label="`${'เลขที่ใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="issueDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(issueDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
]"
hide-bottom-space
:label="`${'วันที่ออกใบอนุญาต'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="expireDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(expireDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
hide-bottom-space
:label="`${'วันที่หมดอายุ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'expireDate' ||
col.name == 'issueDate' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

1510
src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
View file

File diff suppressed because it is too large Load diff

762
src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
View file

@ -1,762 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { Goverment } from "@/modules/04_registry/components/profileType";
import { defaultGoverment } from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import HistoryTable from "@/components/TableHistory.vue";
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { storeToRefs } from "pinia";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
profileType: {
type: String,
required: true,
},
employeeClass: {
type: String,
required: true,
},
});
const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const profileStore = useProfileDataStore();
const { birthDate, retireText } = storeToRefs(profileStore);
const edit = ref<boolean>(false);
const govermentData = ref<Goverment>(defaultGoverment);
const myform = ref<any>();
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลราชการ"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionPathSide",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionPathSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLine",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionLine",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionType",
align: "left",
label: "ประเภท",
sortable: true,
field: "positionType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutive",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "positionExecutive",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutiveSide",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "positionExecutiveSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateAppoint",
align: "left",
label: "วันที่บรรจุ",
sortable: true,
field: "dateAppoint",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateStart",
align: "left",
label: "เริ่มปฎิบัติราชการ",
sortable: true,
field: "dateStart",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "retireDate",
align: "left",
label: "วันเกษียณอายุ",
sortable: true,
field: "retireDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "govAge",
align: "left",
label: "อายุราชการ",
sortable: true,
field: "govAge",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "govAgeAbsent",
align: "left",
label: "ขาดราชการ",
sortable: true,
field: "govAgeAbsent",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "govAgePlus",
align: "left",
label: "อายุราชการเกื้อกูล",
sortable: true,
field: "govAgePlus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "reasonSameDate",
align: "left",
label: "เหตุผลกรณีไม่ตรงวัน",
sortable: true,
field: "reasonSameDate",
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[]>([
"oc",
"position",
"positionPathSide",
"posNo",
"positionLine",
"positionType",
"positionLevel",
"positionexecutive",
"positionExecutiveSide",
"dateAppoint",
"dateStart",
"retireDate",
"govAge",
"govAgeAbsent",
"govAgePlus",
"reasonSameDate",
"createdFullName",
"createdAt",
]);
onMounted(async () => {
await fetchData();
emit("update:statusEdit", false);
});
watch(birthDate, async () => {
await fetchData();
});
watch(retireText, async () => {
govermentData.value.retireDate = retireText.value;
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.profileGovId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject = res.data.result;
govermentData.value.ocId = data.oc;
govermentData.value.positionId = data.position;
govermentData.value.positionPathSide = data.positionPathSide;
govermentData.value.positionLine = data.positionLine;
govermentData.value.positionType = data.positionType;
govermentData.value.positionLevel = data.positionLevel;
govermentData.value.numberId = data.posNo;
govermentData.value.positionExecutive = data.positionExecutive;
govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
govermentData.value.containDate = new Date(data.dateAppoint);
govermentData.value.workDate = new Date(data.dateStart);
govermentData.value.retireDate = data.retireDate;
govermentData.value.absent = data.govAgeAbsent;
govermentData.value.age = data.govAgePlus;
govermentData.value.ageAll = data.govAge;
govermentData.value.reasonSameDate = data.reasonSameDate;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const refreshData = async () => {
myform.value.reset();
await fetchData();
};
const editData = async () => {
showLoader();
await http
.put(config.API.profileGovId(route.params.id.toString()), {
dateAppoint: dateToISO(govermentData.value.containDate),
dateStart: dateToISO(govermentData.value.workDate),
reasonSameDate: govermentData.value.reasonSameDate,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
emit("update:statusEdit", false);
edit.value = false;
await refreshData();
});
};
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
} else {
}
});
};
const handleDate = async (modelData: Date) => {
govermentData.value.containDate = modelData;
await fetchCalAgeGov(modelData);
};
const fetchCalAgeGov = async (date: Date) => {
showLoader();
const body = {
dateAppoint: date,
};
await http
.post(config.API.profileCalGovId(route.params.id.toString()), body)
.then((res) => {
const result = res.data.result;
govermentData.value.ageAll = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileGovHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
oc: e.oc,
position: e.position,
positionPathSide: e.positionPathSide,
posNo: e.posNo,
positionLine: e.positionLine,
positionType: e.positionType,
positionLevel: e.positionLevel,
positionExecutive: e.positionExecutive,
positionExecutiveSide: e.positionExecutiveSide,
dateAppoint: new Date(e.dateAppoint),
dateStart: new Date(e.dateStart),
retireDate: e.retireDate,
govAge: e.govAge,
govAgeAbsent: e.govAgeAbsent,
govAgePlus: e.govAgePlus,
reasonSameDate: e.reasonSameDate,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลราชการ"
icon="mdi-account-tie"
:save="saveData"
:history="true"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.ocId"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.numberId"
:label="`${'ตำแหน่งเลขที่'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionId"
:label="`${'ตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionPathSide"
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionLine"
:label="`${'สายงาน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionType"
:label="`${'ประเภท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionLevel"
:label="`${'ระดับ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutive"
:label="`${'ตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutiveSide"
:label="`${'ด้านตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-12 q-py-md"><q-separator /></div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="govermentData.containDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
@update:model-value="handleDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(new Date(govermentData.containDate))"
:rules="[
(val) =>
!!val ||
`${
profileType == 'officer'
? 'กรุณาเลือกวันที่บรรจุ'
: 'กรุณาเลือกวันที่แต่งตั้ง'
}`,
]"
:label="`${
profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="govermentData.workDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(new Date(govermentData.workDate))"
:rules="[
(val) =>
!!val ||
`${
profileType == 'officer'
? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
: 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
}`,
]"
:label="`${
profileType == 'officer'
? 'เริ่มปฎิบัติราชการ'
: 'วันที่จ้างและแต่งตั้งมีผล'
}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
stack-label
:readonly="!edit"
:borderless="!edit"
v-model="govermentData.reasonSameDate"
:label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.retireDate"
:label="`${'วันเกษียณอายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.ageAll"
:label="`${'อายุราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.absent"
:label="`${'ขาดราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.age"
:label="`${'อายุราชการเกื้อกูล'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
: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 == 'dateStart' ||
col.name == 'dateAppoint' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

1165
src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
View file

File diff suppressed because it is too large Load diff

976
src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
View file

@ -1,976 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/OldName";
import type { ResponseObject } from "@/modules/04_registry/interface/response/OldName";
import type {
OldNameOps,
DataOption,
} from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
fetchDataInformation: {
type: Function,
default: () => console.log("not function"),
},
perfixId: {
type: String,
required: true,
},
firstname: {
type: String,
required: true,
},
lastname: {
type: String,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
typeChangeName,
dialogMessage,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const prefixId = ref<string>();
const firstName = ref<string>();
const lastName = ref<string>();
const status = ref<string>();
const nameFile = ref<string>("");
const minDate = ref<Date>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(route.params.id.toString());
const file = ref<string | null>(null);
const fileUpload = ref<any>([]);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
const Ops = ref<OldNameOps>({
prefixOps: [],
statusOps: [
{
id: "firstName",
name: "เปลี่ยนชื่อ",
},
{
id: "lastName",
name: "เปลี่ยนนามสกุล",
},
{
id: "all",
name: "เปลี่ยนชื่อ-นามสกุล",
},
],
});
const OpsFilter = ref<OldNameOps>({
prefixOps: [],
statusOps: [
{
id: "firstName",
name: "เปลี่ยนชื่อ",
},
{
id: "lastName",
name: "เปลี่ยนนามสกุล",
},
{
id: "all",
name: "เปลี่ยนชื่อ-นามสกุล",
},
],
});
profileData.oldName.columns.length == 0
? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
: (visibleColumns.value = profileData.oldName.columns);
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 visibleColumnsHistory = ref<String[]>([
"prefix",
"firstName",
"lastName",
"status",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("oldName", count);
});
onMounted(async () => {
await fetchPerson();
await fetchData();
});
const fetchData = async () => {
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();
});
};
/**
* get รายการ ข้อมูลเกี่ยวกับบุคคล
*/
const fetchPerson = async () => {
showLoader();
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
})
.catch((e: any) => {})
.finally(() => {
hideLoader();
});
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
prefixId.value = row.prefixId;
firstName.value = row.firstName;
lastName.value = row.lastName;
status.value = row.status;
file.value = row.file;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (fileUpload.value.length > 0) {
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
const newFile = new File(blob, nameFile.value, {
type: fileUpload.value[0].type,
});
const formData = new FormData();
formData.append("", newFile);
if (prefixId.value != undefined)
formData.append("prefixId", prefixId.value);
if (firstName.value != undefined)
formData.append("firstName", firstName.value);
if (lastName.value != undefined)
formData.append("lastName", lastName.value);
if (status.value != undefined) formData.append("status", status.value);
showLoader();
await http
.post(config.API.profileChangeNameId(profileId.value), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetchDataInformation();
});
} else {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาอัปโหลดเอกสารหลักฐาน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
const formData = new FormData();
if (fileUpload.value.length > 0) {
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
const newFile = new File(blob, nameFile.value, {
type: fileUpload.value[0].type,
});
formData.append("", newFile);
}
if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
if (firstName.value != undefined)
formData.append("firstName", firstName.value);
if (lastName.value != undefined) formData.append("lastName", lastName.value);
if (status.value != undefined) formData.append("status", status.value);
showLoader();
await http
.put(config.API.profileChangeNameId(id.value), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetchDataInformation();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileChangeNameId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
modal.value = true; //modal ที่เด้งขึ้นมา
edit.value = false; //ปุ่ม edit ใน modal
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
prefixId.value = props.row.prefixId;
firstName.value = props.row.firstName;
lastName.value = props.row.lastName;
status.value = props.row.status;
file.value = props.row.file;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
prefixId.value = props.perfixId;
firstName.value = props.firstname;
lastName.value = props.lastname;
status.value = "";
file.value = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (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();
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const fileAdd = async (val: any) => {
nameFile.value = val[0].name;
fileUpload.value = val;
};
const openFile = async (val: string | null) => {
if (val != null) window.open(val);
};
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
<template>
<div class="col-12">
<q-form ref="myForm">
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
icon="mdi-book"
:statusEdit="!statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="statusEdit ? selectData(props) : ''"
class="cursor-pointer"
>
<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>
</ProfileTable>
</q-form>
</div>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก สถานะการเปลี่ยนชื่อ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="status"
emit-value
map-options
option-label="name"
:options="Ops.statusOps"
option-value="id"
:label="`${'สถานะการเปลี่ยนชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
) "
/>
</div>
<q-space class="col-6" />
<div class="col-xs-4 col-sm-4 col-md-4">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="prefixId"
emit-value
map-options
option-label="name"
:options="Ops.prefixOps"
option-value="id"
:label="`${'คำนำหน้าชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit || status == 'lastName'"
:borderless="!edit"
v-model="firstName"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
:label="`${'ชื่อ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit || status == 'firstName'"
:borderless="!edit"
v-model="lastName"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
:label="`${'นามสกุล'}`"
@update:modelValue="clickEditRow"
/>
</div>
<q-btn
v-if="file != null && !edit"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(file)"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} /
{{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

674
src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
View file

@ -1,674 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue";
import HistoryTable from "@/components/TableHistory.vue";
import { useRoute } from "vue-router";
import type { QTableProps } from "quasar";
import CurrencyInput from "@/components/CurruncyInput.vue";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
fetchDataProfile: {
type: Function,
default: () => {
/* function */
},
},
statusAdd: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const edit = ref<boolean>(false);
const myform = ref<any>();
const employeeOc = ref<string>("");
const codec = ref<string>("");
const rows = ref<any[]>([]);
const positionEmployeeGroupId = ref<string>("");
const employeeGroupOptions = ref<DataOption[]>([]);
const positionEmployeeLineId = ref<string>("");
const positionEmployeeLineOptions = ref<DataOption[]>([]);
const positionEmployeePositionId = ref<string>("");
const positionEmployeePositionOptions = ref<DataOption[]>([]);
const employeeWage = ref<number>(0);
const employeeTypeIndividual = ref<string>("");
const employeeMoneyIncrease = ref<number>(0);
const employeeMoneyAllowance = ref<number>(0);
const employeeMoneyEmployee = ref<number>(0);
const employeeMoneyEmployer = ref<number>(0);
const informaTempData = ref<any>(defaultTempInformation);
const rowsHistory = ref<any[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "positionEmployeeGroupId",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionEmployeeGroupId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionEmployeeLineId",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionEmployeeLineId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionEmployeePositionId",
align: "left",
label: "ชื่อตำแหน่งทางสายงาน",
sortable: true,
field: "positionEmployeePositionId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeOc",
align: "left",
label: "สังกัด",
sortable: true,
field: "employeeOc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeWage",
align: "left",
label: "ค่าจ้าง",
sortable: true,
field: "employeeWage",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeTypeIndividual",
align: "left",
label: "ประเภทบุคคล",
sortable: true,
field: "employeeTypeIndividual",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeMoneyIncrease",
align: "left",
label: "เงินช่วยเหลือการครองชีพชั่วคราว",
sortable: true,
field: "employeeMoneyIncrease",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeMoneyAllowance",
align: "left",
label: "เงินช่วยเหลือการครองชีพชั่วคราว",
sortable: true,
field: "employeeMoneyAllowance",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeMoneyEmployee",
align: "left",
label: "เงินสมทบประกันสังคม(ลูกจ้าง)",
sortable: true,
field: "employeeMoneyEmployee",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeMoneyEmployer",
align: "left",
label: "เงินสมทบประกันสังคม(นายจ้าง)",
sortable: true,
field: "employeeMoneyEmployer",
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[]>([
"employeeMoneyIncrease",
"employeeMoneyAllowance",
"employeeMoneyEmployee",
"employeeMoneyEmployer",
"positionEmployeeGroupId",
"positionEmployeePositionId",
"positionEmployeeLineId",
"employeeTypeIndividual",
"employeeOc",
"employeeWage",
]);
onMounted(async () => {
await fetchData();
await fetchDataSelector();
});
const statusAdd = () => props.statusAdd;
const fetchDataSelector = async () => {
showLoader();
await fetchEmployeeGroup();
await fetchpositionEmployeeLine();
await fetchPositionEmployeePosition();
hideLoader();
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
// const clickHistory = async () => {
// modalHistory.value = true;
// showLoader();
// await http
// .get(config.API.profileEmployeeTempId(route.params.id.toString()))
// .then((res) => {
// let data = res.data.result;
// rowsHistory.value = [];
// data.map((e: any) => {
// rowsHistory.value.push({
// employeeMoneyIncrease: e.employeeMoneyIncrease,
// employeeMoneyAllowance: e.employeeMoneyAllowance,
// employeeMoneyEmployee: e.employeeMoneyEmployee,
// employeeMoneyEmployer: e.employeeMoneyEmployer,
// positionEmployeeGroupId: e.positionEmployeeGroupId,
// positionEmployeePositionId: e.positionEmployeePositionId,
// positionEmployeeLineId: e.positionEmployeeLineId,
// employeeTypeIndividual: e.employeeTypeIndividual,
// employeeOc: e.employeeOc,
// employeeWage: e.employeeWage,
// createdFullName: e.createdFullName,
// createdAt: new Date(e.createdAt),
// });
// });
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
// };
const refreshData = async () => {
myform.value.reset();
await getNewData();
};
const getNewData = async () => {
await fetchData();
};
const fetchData = async () => {
if (route.params.id) {
showLoader();
await http
.get(config.API.profileEmployeeTempId(route.params.id.toString()))
.then((res) => {
// const data: any = res.data.result;
// rows.value = [];
// data.map((e: any) => {
// rows.value.push({
// employeeMoneyIncrease: e.employeeMoneyIncrease,
// employeeMoneyAllowance: e.employeeMoneyAllowance,
// employeeMoneyEmployee: e.employeeMoneyEmployee,
// employeeMoneyEmployer: e.employeeMoneyEmployer,
// positionEmployeeGroupId: e.positionEmployeeGroupId,
// positionEmployeePositionId: e.positionEmployeePositionId,
// positionEmployeeLineId: e.positionEmployeeLineId,
// employeeTypeIndividual: e.employeeTypeIndividual,
// employeeOc: e.employeeOc,
// employeeWage: e.employeeWage,
// });
// });
const data: any = res.data.result;
informaTempData.value.employeeMoneyIncrease =
data.employeeMoneyIncrease;
informaTempData.value.employeeMoneyAllowance =
data.employeeMoneyAllowance;
informaTempData.value.employeeMoneyEmployee =
data.employeeMoneyEmployee;
informaTempData.value.employeeMoneyEmployer =
data.employeeMoneyEmployer;
informaTempData.value.positionEmployeeGroupId =
data.positionEmployeeGroupId !==
"00000000-0000-0000-0000-000000000000"
? data.positionEmployeeGroupId
: "";
informaTempData.value.positionEmployeePositionId =
data.positionEmployeePositionId !==
"00000000-0000-0000-0000-000000000000"
? data.positionEmployeePositionId
: "";
informaTempData.value.positionEmployeeLineId =
data.positionEmployeeLineId !== "00000000-0000-0000-0000-000000000000"
? data.positionEmployeeLineId
: "";
informaTempData.value.employeeTypeIndividual =
data.employeeTypeIndividual;
informaTempData.value.employeeOc = data.employeeOc;
informaTempData.value.employeeWage = data.employeeWage;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
await props.fetchDataProfile();
});
}
};
// กลุ่มงาน
const fetchEmployeeGroup = async () => {
await http
.get(config.API.positionEmployeeGroup)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
employeeGroupOptions.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
const fetchpositionEmployeeLine = async () => {
await http
.get(config.API.positionEmployeeLine)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
positionEmployeeLineOptions.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
//ชื่อตำแหน่ง
const fetchPositionEmployeePosition = async () => {
await http
.get(config.API.positionEmployeePosition)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
positionEmployeePositionOptions.value = option;
})
.catch((e) => {
messageError($q, e);
});
};
const editData = async () => {
const body: any = {
employeeMoneyIncrease: informaTempData.value.employeeMoneyIncrease,
employeeMoneyAllowance: informaTempData.value.employeeMoneyAllowance,
employeeMoneyEmployee: informaTempData.value.employeeMoneyEmployee,
employeeMoneyEmployer: informaTempData.value.employeeMoneyEmployer,
positionEmployeeGroupId: informaTempData.value.positionEmployeeGroupId,
positionEmployeePositionId:
informaTempData.value.positionEmployeePositionId,
positionEmployeeLineId: informaTempData.value.positionEmployeeLineId,
employeeTypeIndividual: informaTempData.value.employeeTypeIndividual,
employeeOc: informaTempData.value.employeeOc,
employeeWage: informaTempData.value.employeeWage,
};
showLoader();
await http
.put(config.API.profileEmployeeTempId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await getNewData();
});
};
const addData = async () => {
const body: any = {
employeeMoneyIncrease: employeeMoneyIncrease.value,
employeeMoneyAllowance: employeeMoneyAllowance.value,
employeeMoneyEmployee: employeeMoneyEmployee.value,
employeeMoneyEmployer: employeeMoneyEmployer.value,
positionEmployeeGroupId: positionEmployeeGroupId.value,
positionEmployeePositionId: positionEmployeePositionId.value,
positionEmployeeLineId: positionEmployeeLineId.value,
employeeTypeIndividual: employeeTypeIndividual.value,
employeeOc: employeeOc.value,
employeeWage: employeeWage.value,
};
showLoader();
await http
.put(config.API.profileInforId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await fetchData();
});
};
const saveData = async () => {
dialogConfirm($q, () => Datasave());
};
const Datasave = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
if (props.statusAdd) {
await addData();
} else {
await editData();
}
} else {
}
});
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลลูกจ้างชั่วคราว"
icon="mdi-account"
:save="saveData"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:addEmployee="statusAdd()"
:history="!statusAdd()"
/>
<q-form ref="myform">
<div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeeGroupId"
:label="`${'กลุ่มงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="employeeGroupOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeeLineId"
:label="`${'สายงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="positionEmployeeLineOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeePositionId"
:label="`${'ชื่อตำแหน่งทางสายงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="positionEmployeePositionOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.employeeOc"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.employeeTypeIndividual"
:label="`${'ประเภทบุคคล'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeWage"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'ค่าจ้าง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyIncrease"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyAllowance"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyEmployee"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyEmployer"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
: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 == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

1276
src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
View file

File diff suppressed because it is too large Load diff

626
src/modules/08_registryEmployee/components/EditEmployee/Other.vue
View file

@ -1,626 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Other";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Other";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
const detail = ref<string>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขอื่นๆ"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.other.columns.length == 0
? (visibleColumns.value = ["date", "detail"])
: (visibleColumns.value = profileData.other.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วันที่",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width: 50px;",
},
{
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" }),
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วันที่",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width: 50px;",
},
{
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: "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[]>([
"date",
"detail",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("other", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileOtherId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
date: new Date(e.date),
detail: e.detail,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
date.value = row.date;
detail.value = row.detail;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = () => {
dialogConfirm($q, () => SaveData());
};
const SaveData = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileOtherId(profileId.value), {
id: id.value,
date: date.value,
detail: detail.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileOtherId(id.value), {
id: id.value,
date: date.value,
detail: detail.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileOtherId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
date.value = props.row.date;
detail.value = props.row.detail;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
date.value = new Date();
detail.value = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileOtherHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
date: e.date,
detail: e.detail,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
// const validateData = async () => {
// checkValidate.value = true;
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
// };
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<!-- card อื่นๆ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="อื่นๆ"
icon="mdi-bookmark"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="อื่นๆ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
hide-bottom-space
:label="`${'วันที่'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

827
src/modules/08_registryEmployee/components/EditEmployee/Record.vue
View file

@ -1,827 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Record";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Record";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
const detail = ref<string>();
const reference = ref<string>();
const refCommandNo = ref<string>();
const refCommandDate = ref<Date | null>(new Date());
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>(
"ประวัติแก้ไขวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
);
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.record.columns.length == 0
? (visibleColumns.value = [
"date",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
])
: (visibleColumns.value = profileData.record.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "date",
align: "left",
label: "วัน เดือน ปี",
sortable: true,
field: "date",
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" }),
},
{
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: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandDate",
align: "left",
label: "เอกสารอ้างอิง (ลงวันที่)",
sortable: true,
field: "refCommandDate",
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: "date",
align: "left",
label: "วัน เดือน ปี",
sortable: true,
field: "date",
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" }),
},
{
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: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandDate",
align: "left",
label: "เอกสารอ้างอิง (ลงวันที่)",
sortable: true,
field: "refCommandDate",
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[]>([
"date",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("record", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (profileId.value != "") {
showLoader();
await http
.get(config.API.profileNopaidId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
date: new Date(e.date),
detail: e.detail,
reference: e.reference,
refCommandNo: e.refCommandNo,
refCommandDate:
e.refCommandDate == null ? null : new Date(e.refCommandDate),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
date.value = row.date;
detail.value = row.detail;
reference.value = row.reference;
refCommandNo.value = row.refCommandNo;
refCommandDate.value = row.refCommandDate;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileNopaidId(profileId.value), {
id: id.value,
date: dateToISO(date.value),
detail: detail.value,
reference: reference.value,
refCommandNo: refCommandNo.value,
refCommandDate:
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileNopaidId(id.value), {
id: id.value,
date: dateToISO(date.value),
detail: detail.value,
reference: reference.value,
refCommandNo: refCommandNo.value,
refCommandDate:
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileNopaidId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
date.value = props.row.date;
detail.value = props.row.detail;
reference.value = props.row.reference;
refCommandNo.value = props.row.refCommandNo;
refCommandDate.value = props.row.refCommandDate;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
date.value = new Date();
detail.value = "";
reference.value = "";
refCommandNo.value = "";
refCommandDate.value = null;
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileNopaidHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
date: new Date(e.date),
detail: e.detail,
reference: e.reference,
refCommandNo: e.refCommandNo,
refCommandDate:
e.refCommandDate == null ? null : new Date(e.refCommandDate),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const resetFilter = () => {};
</script>
<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
icon="mdi-calendar-remove"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'date' || col.name == 'refCommandDate'"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
hide-bottom-space
:label="`${'วัน เดือน ปี'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
autogrow
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
autogrow
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'date' ||
col.name == 'createdAt' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

2086
src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
View file

File diff suppressed because it is too large Load diff

2058
src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
View file

File diff suppressed because it is too large Load diff

692
src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
View file

@ -1,692 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Talent";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Talent";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const field = ref<string>();
const detail = ref<string>();
const remark = ref<string>();
const reference = ref<string>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขความสามารถพิเศษ"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.talent.columns.length == 0
? (visibleColumns.value = ["field", "detail", "remark", "reference"])
: (visibleColumns.value = profileData.talent.columns);
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 columnsHistory = 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" }),
},
{
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[]>([
"field",
"detail",
"remark",
"reference",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("talent", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileAbiliId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
field: e.field,
detail: e.detail,
remark: e.remark,
reference: e.reference,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
field.value = row.field;
detail.value = row.detail;
remark.value = row.remark;
reference.value = row.reference;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = () => {
dialogConfirm($q, () => SaveData());
};
const SaveData = async () => {
await myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileAbiliId(profileId.value), {
id: id.value,
field: field.value,
detail: detail.value,
remark: remark.value,
reference: reference.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileAbiliId(id.value), {
id: id.value,
field: field.value,
detail: detail.value,
remark: remark.value,
reference: reference.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileAbiliId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
field.value = props.row.field;
detail.value = props.row.detail;
remark.value = props.row.remark;
reference.value = props.row.reference;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
field.value = "";
detail.value = "";
remark.value = "";
reference.value = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileAbiliHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
field: e.field,
detail: e.detail,
remark: e.remark,
reference: e.reference,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
// const validateData = async () => {
// checkValidate.value = true;
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
// };
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<!-- card ความสามารถพิเศษ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ความสามารถพิเศษ"
icon="mdi-folder-star"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="field"
:rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
hide-bottom-space
:label="`${'ด้าน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="remark"
hide-bottom-space
:label="`${'หมายเหตุ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

187
src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
View file

@ -1,187 +0,0 @@
<script setup lang="ts">
const props = defineProps({
header: {
type: String,
default: "ข้อความ",
required: true,
},
iconAdd: {
type: String,
default: null,
},
icon: {
type: String,
default: "mdi-help",
required: true,
},
edit: {
type: Boolean,
default: true,
required: true,
},
history: {
type: Boolean,
default: true,
required: true,
},
addData: {
type: Boolean,
defualt: false,
},
disable: {
type: Boolean,
defualt: false,
},
historyClick: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
deleted: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
changeBtn: {
type: Function,
default: () => console.log("not function"),
},
addEmployee: {
type: Boolean,
defualt: false,
},
});
const emit = defineEmits(["update:edit"]);
const updateEdit = (value: any) => {
emit("update:edit", value);
};
const ClickEdit = () => {
updateEdit(!props.edit);
props.changeBtn();
};
const historyClick = async () => {
await props.historyClick();
};
const ClickCancel = () => {
updateEdit(!props.edit);
props.cancel();
props.changeBtn();
};
const save = () => {
props.save();
};
const add = () => {
props.add();
};
const addleave = () => {
props.addleave();
};
</script>
<template>
<div class="flex items-center">
<div class="flex items-center">
<q-icon
:name="icon"
size="1.5em"
color="grey-5"
class="q-mr-md"
v-if="icon != ''"
/>
<div
class="text-bold text-subtitle2 col-12 row items-center"
v-if="header != ''"
>
{{ header }}
</div>
</div>
<div class="q-gutter-sm q-mx-sm" v-if="addData == false">
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="disable"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit && !addEmployee"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
<q-btn
size="12px"
flat
round
color="add"
@click="addleave"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
<q-tooltip>สรุปวันลา</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
flat
round
:disabled="disable"
color="add"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<q-space />
</div>
</template>

1136
src/modules/08_registryEmployee/components/EditEmployee/Train.vue
View file

File diff suppressed because it is too large Load diff

914
src/modules/08_registryEmployee/components/EditEmployee/Work.vue
View file

@ -1,914 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/Work";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Work";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const dateStart = ref<Date>(new Date());
const dateEnd = ref<Date>(new Date());
const detail = ref<string>();
const reference = ref<string>();
const minDate = ref<Date>();
const refCommandNo = ref<string>();
const refCommandDate = ref<Date | null>(new Date());
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขปฏิบัติราชการพิเศษ"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.work.columns.length == 0
? (visibleColumns.value = [
"dateStart",
"dateEnd",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
])
: (visibleColumns.value = profileData.work.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "dateStart",
align: "left",
label: "เริ่มต้น",
sortable: true,
field: "dateStart",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateEnd",
align: "left",
label: "สิ้นสุด",
sortable: true,
field: "dateEnd",
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" }),
},
{
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: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandDate",
align: "left",
label: "เอกสารอ้างอิง (ลงวันที่)",
sortable: true,
field: "refCommandDate",
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: "dateStart",
align: "left",
label: "เริ่มต้น",
sortable: true,
field: "dateStart",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateEnd",
align: "left",
label: "สิ้นสุด",
sortable: true,
field: "dateEnd",
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" }),
},
{
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: "refCommandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandDate",
align: "left",
label: "เอกสารอ้างอิง (ลงวันที่)",
sortable: true,
field: "refCommandDate",
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[]>([
"dateStart",
"dateEnd",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
"createdFullName",
"createdAt",
]);
watch(dateStart, (count, prevCount) => {
minDate.value = new Date(dateStart.value);
});
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("work", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profileDutyId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
dateStart: new Date(e.dateStart),
dateEnd: new Date(e.dateEnd),
detail: e.detail,
reference: e.reference,
refCommandNo: e.refCommandNo,
refCommandDate:
e.refCommandDate == null ? null : new Date(e.refCommandDate),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
dateStart.value = row.dateStart;
dateEnd.value = row.dateEnd;
detail.value = row.detail;
reference.value = row.reference;
refCommandNo.value = row.refCommandNo;
refCommandDate.value = row.refCommandDate;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = () => {
dialogConfirm($q, () => SaveData());
};
const SaveData = async () => {
await myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value) {
showLoader();
await http
.post(config.API.profileDutyId(profileId.value), {
id: id.value,
dateStart: dateToISO(dateStart.value),
dateEnd: dateToISO(dateEnd.value),
detail: detail.value,
reference: reference.value,
refCommandNo: refCommandNo.value,
refCommandDate:
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileDutyId(id.value), {
id: id.value,
dateStart: dateToISO(dateStart.value),
dateEnd: dateToISO(dateEnd.value),
detail: detail.value,
reference: reference.value,
refCommandNo: refCommandNo.value,
refCommandDate:
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileDutyId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
dateStart.value = props.row.dateStart;
dateEnd.value = props.row.dateEnd;
detail.value = props.row.detail;
reference.value = props.row.reference;
refCommandNo.value = props.row.refCommandNo;
refCommandDate.value = props.row.refCommandDate;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
dateStart.value = new Date();
dateEnd.value = new Date();
detail.value = "";
reference.value = "";
refCommandNo.value = "";
refCommandDate.value = null;
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileDutyHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
dateStart: new Date(e.dateStart),
dateEnd: new Date(e.dateEnd),
detail: e.detail,
reference: e.reference,
refCommandNo: e.refCommandNo,
refCommandDate:
e.refCommandDate == null ? null : new Date(e.refCommandDate),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
// const validateData = async () => {
// checkValidate.value = true;
// await myForm.value.validate().then((result: boolean) => {
// if (result == false) {
// checkValidate.value = false;
// }
// });
// };
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const resetFilter = () => {};
</script>
<!-- card ปฏิบัติราชการพิเศษ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ปฏิบัติราชการพิเศษ"
icon="mdi-bookmark"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateEnd' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateStart"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(dateStart)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
hide-bottom-space
:label="`${'วันที่เริ่มต้น'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="date2Thai(dateEnd)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
hide-bottom-space
:label="`${'วันที่สิ้นสุด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
: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 == 'dateStart' ||
col.name == 'dateEnd' ||
col.name == 'createdAt' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

74
src/modules/08_registryEmployee/views/Add.vue
View file

@ -1,74 +0,0 @@
<script setup lang="ts">
import AddEmployee from "@/modules/08_registryEmployee/components/AddEmployee/Main.vue";
</script>
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
<div id="information" name="1" class="row col-12 information q-mt-sm">
<AddEmployee />
</div>
</div>
</div>
</template>
<style>
.image-size-default {
height: 150px;
max-width: 15vw;
}
.image-size-full {
height: 160px;
max-width: 15vw;
}
.border-green {
border: 5px solid #52c688;
}
.area-div {
background-color: transparent;
}
.text-header {
font-size: 1.2em;
}
.containerimage {
position: relative;
}
.containerimage:hover .overlay {
opacity: 1;
}
.overlay {
background-color: #e4f2ffd2 !important;
opacity: 0;
padding: 2px !important;
}
.information:target {
padding-top: 84px;
}
.border-custom {
border: 0.5px solid #c3c3c3;
}
.bg-active-image {
background-color: #52c688;
}
.text-name {
font-size: 1.3em;
overflow: hidden;
}
.text-sub {
font-size: 1.2em;
overflow: hidden;
color: var(--q-primary);
}
</style>

915
src/modules/08_registryEmployee/views/EditDetail.vue
View file

@ -1,915 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import EducationVue from "@/modules/08_registryEmployee/components/EditEmployee/Education.vue";
import TrainVue from "@/modules/08_registryEmployee/components/EditEmployee/Train.vue";
import AssessmentVue from "@/modules/08_registryEmployee/components/EditEmployee/Assessment.vue";
// import SalaryVue from "@/modules/08_registryEmployee/components/EditEmployee/Salary.vue";
import SalaryEmployeeVue from "@/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue";
import DisciplineVue from "@/modules/08_registryEmployee/components/EditEmployee/Discipline.vue";
import LeaveVue from "@/modules/08_registryEmployee/components/EditEmployee/Leave.vue";
import TalentVue from "@/modules/08_registryEmployee/components/EditEmployee/Talent.vue";
import WorkVue from "@/modules/08_registryEmployee/components/EditEmployee/Work.vue";
// import RecordVue from "@/modules/08_registryEmployee/components/EditEmployee/Record.vue";
import OtherVue from "@/modules/08_registryEmployee/components/EditEmployee/Other.vue";
import DocumentVue from "@/modules/08_registryEmployee/components/EditEmployee/Document.vue";
import Certicate from "@/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue";
import Information from "@/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue";
import TempInformation from "@/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue";
import Address from "@/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue";
import Family from "@/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue";
import Employment from "@/modules/08_registryEmployee/components/EditEmployee/Employment.vue";
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
dateToISO,
messageError,
dialogMessage,
success,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const router = useRouter();
const imageUrl = ref<any>(null);
const inputImage = ref<any>(null);
const fullname = ref<string>("");
const position = ref<string>("นักจัดการงานทั่วไป");
const dialog = ref<boolean>(false);
const dialogShort = ref<boolean>(false);
const dialogLeave = ref<boolean>(false);
const dialogImage = ref<boolean>(false);
const statusEdit = ref<boolean>(false);
const activeImage = ref<any | null>(null);
const images = ref<any>([]);
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const profileType = ref<string>("");
const leaveDate = ref<Date>(new Date());
const leaveDetail = ref<string>("");
const leaveNumberOrder = ref<string>("");
const leaveDateOrder = ref<Date>(new Date());
const reason = ref<string>("");
const reasonStatus = ref<boolean>(false);
const leaveReason = ref<string>("");
const reasonOptions = ref<DataOption[]>([
{
id: "retire",
name: "เกษียณอายุราชการ",
},
{
id: "resign",
name: "ลาออก",
},
{
id: "transfer",
name: "ให้โอน",
},
{
id: "death",
name: "ถึงแก่กรรม",
},
{
id: "layoff",
name: "ให้ออก",
},
{
id: "discharge",
name: "ปลดออก",
},
{
id: "dismiss",
name: "ไล่ออก",
},
{
id: "other",
name: "อื่นๆ",
},
]);
// get ข้อมูลทั้งหมด
const fetchData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarId(profileId.value))
.then((res) => {
const data = res.data.result;
fullname.value = data.fullname;
imageUrl.value = data.avatar;
position.value = data.position;
profileType.value = data.profileType;
const reason = reasonOptions.value.filter(
(r: DataOption) => r.id == data.leaveReason
);
if (reason.length > 0) {
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
} else {
leaveReason.value = "";
}
reasonStatus.value = reason.length > 0 ? true : false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const fetchAvatarHistory = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarHistoryId(profileId.value))
.then((res) => {
let data = res.data.result;
images.value = [];
data.map((e: any) => {
images.value.push({
id: e.id,
avatar: e.avatar,
avatarId: e.avatarId,
createdDate: new Date(e.createdDate),
isActive: e.isActive,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const uploadImage = async (e: any) => {
if (profileId.value !== "") {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
formData.append("FileData", input[0]);
showLoader();
await http
.post(config.API.profileAvatarId(profileId.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
dialogImage.value = false;
});
return;
}
}
};
const fetchDataDelete = async (id: string) => {
showLoader();
await http
.delete(config.API.profileAvatarHistoryId(id))
.then((res) => {
success($q, "ลบรูปภาพสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await clickImage();
});
};
const deletePhoto = async (id: string) => {
dialogMessage(
$q,
"ลบข้อมูล",
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
"delete",
undefined,
"red",
() => fetchDataDelete(id),
undefined,
false
);
};
const selectAvatarHistory = async () => {
if (activeImage.value == null) {
dialogMessage(
$q,
"ไม่สามารถเปลี่ยนรูปได้",
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
}
if (profileId.value !== "") {
showLoader();
await http
.put(config.API.profileAvatarId(profileId.value), {
avatar: activeImage.value.avatarId,
})
.then((res) => {
dialogImage.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
const imageActive = (n: any) => {
activeImage.value = n;
};
const imageClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders bg-grey-2 image-size-default": val,
"rounded-borders bg-grey-2 image-size-full": !val,
};
};
const getClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders border-green shadow-1": val,
"rounded-borders shadow-1": !val,
};
};
const addNewImage = async () => {
inputImage.value.click();
await imageActive(null);
};
const clickImage = async () => {
await fetchAvatarHistory();
dialogImage.value = true;
};
const closeImage = () => {
dialogImage.value = false;
};
const closeLeave = () => {
dialogLeave.value = false;
};
const closeKp7 = () => {
dialog.value = false;
};
const closeKp7Short = () => {
dialogShort.value = false;
};
const downloadKP7 = () => {};
const downloadKP7Short = () => {};
const downloadFilePDF = async (res: string, fileName: string) => {
const link = document.createElement("a");
// link.href = window.URL.createObjectURL(new Blob([res]));
link.href = window.URL.createObjectURL(
new Blob([res], {
type: "application/vnd.ms-excel",
})
);
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
};
const clickKp7Short = async () => {
if (profileId.value !== "") {
window.open(config.API.profileKp7ShortId(profileId.value));
}
// showLoader();
// await http
// .get(config.API.profileKp7ShortId(profileId.value))
// .then((res) => {
// if (res.data) {
// pdfSrcShort.value = "g==";
// pdfCurrentPageShort.value = 1;
// pdfTotalPageShort.value = 7;
// dialogShort.value = true;
// }
// })
// .catch((e) => {messageError($q, e);})
// .finally(() => {
// hideLoader();
// });
};
const clickRetire = async () => {
if (reasonStatus.value == true) {
dialogMessage(
$q,
"โปรดยืนยัน",
"ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
"info",
undefined,
"primary",
Retire,
undefined,
false
);
} else {
leaveDate.value = new Date();
leaveDetail.value = "";
leaveNumberOrder.value = "";
leaveDateOrder.value = new Date();
reason.value = "";
dialogLeave.value = true;
}
};
const Retire = async () => {
if (profileId.value !== "") {
if (reasonStatus.value == true) {
showLoader();
await http
.put(config.API.profileReactive(profileId.value))
.then((res) => {
if (res.data) {
dialogLeave.value = false;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
router.push("/registry");
});
} else {
showLoader();
await http
.put(config.API.profileDeactive(profileId.value), {
leaveDate: dateToISO(leaveDate.value),
leaveDetail: leaveDetail.value,
leaveNumberOrder: leaveNumberOrder.value,
leaveDateOrder: dateToISO(leaveDateOrder.value),
reason: reason.value,
})
.then((res) => {
if (res.data) {
dialogLeave.value = false;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
router.push("/registry");
});
}
}
};
</script>
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
<div id="information" name="1" class="row col-12 information q-mt-sm">
<!-- <Informationvue
v-model:statusEdit="statusEdit"
:profileType="profileType"
/> -->
<Information
v-model:statusEdit="statusEdit"
:fetchDataProfile="fetchData"
:statusAdd="false"
/>
</div>
<div id="government" name="16" class="row col-12">
<!-- <Government v-model:statusEdit="statusEdit" :statusAdd="false" /> -->
</div>
<div id="tempInformation" name="19" class="row col-12">
<TempInformation v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="Employment" name="20" class="row col-12 q-mt-md">
<Employment v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="address" name="17" class="row col-12">
<Address v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="family" name="18" class="row col-12">
<Family v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="certicate" name="15" class="row col-12">
<Certicate
v-model:statusEdit="statusEdit"
:statusAdd="false"
profileType="employee"
/>
</div>
<div id="education" name="2" class="row col-12 q-mt-md">
<EducationVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="training" name="3" class="row col-12 q-mt-md">
<TrainVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="assessment" name="6" class="row col-12 q-mt-md">
<AssessmentVue
v-model:statusEdit="statusEdit"
:statusAdd="false"
profileType="employee"
/>
</div>
<div id="position" name="7" class="row col-12 q-mt-md">
<!-- <SalaryVue
v-model:statusEdit="statusEdit" :statusAdd="false"
v-if="profileType === 'officer'"
/> -->
<SalaryEmployeeVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="rule" name="8" class="row col-12 q-mt-md">
<DisciplineVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="leave" name="9" class="row col-12 q-mt-md">
<LeaveVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="talent" name="10" class="row col-12 q-mt-md">
<TalentVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="work" name="11" class="row col-12 q-mt-md">
<WorkVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="other" name="13" class="row col-12 q-mt-md">
<OtherVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="document" name="14" class="row col-12 q-my-md">
<DocumentVue v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
</div>
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div
class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
>
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar
v-if="imageUrl == null"
size="65px"
rounded
class="containerimage"
>
<img
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="clickImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<q-avatar v-else size="65px" rounded class="containerimage">
<img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="clickImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
{{ fullname }}{{ leaveReason }}
</div>
<div>{{ position }}</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
</div>
<q-dialog v-model="dialog" persistent>
<q-card style="width: 90vw; max-width: 80vw">
<q-card-section class="row items-center q-pb-xs col-12">
<q-space />
<q-btn
@click="downloadKP7()"
unelevated
class="btn_purple q-mr-sm"
label="ดาวน์โหลด ก.พ.7/ก.ก.1"
></q-btn>
<q-btn
icon="close"
unelevated
round
dense
@click="closeKp7"
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="dialogShort" persistent>
<q-card style="width: 90vw; max-width: 80vw">
<q-card-section class="row items-center q-pb-xs col-12">
<q-space />
<q-btn
@click="downloadKP7Short()"
unelevated
class="btn_purple q-mr-sm"
label="ดาวน์โหลด ประวัติแบบย่อ"
></q-btn>
<q-btn
icon="close"
unelevated
round
dense
@click="closeKp7Short"
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-card-section class="q-p-sm">
<!-- <viewpdf
:src="pdfSrcShort"
:currentpage="pdfCurrentPageShort"
:totalpage="pdfTotalPageShort"
></viewpdf> -->
</q-card-section>
</q-card>
</q-dialog>
<!-- Dialog เลือก Image -->
<q-dialog v-model="dialogImage" persistent>
<q-card style="width: 100vw; max-width: 60vw">
<q-card-section class="q-py-sm row">
<div class="text-h6">เลือกรูปภาพ</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
@click="closeImage"
style="color: #ff8080; background-color: #ffdede"
>
<q-tooltip>ปิดหน้านี้</q-tooltip>
</q-btn>
</q-card-section>
<q-separator />
<q-card-section class="col-12 row">
<div
class="row wrap items-start col-12 q-col-gutter-sm"
style="height: 320px; overflow: auto"
>
<div class="col-3" @click="addNewImage">
<div
style="
height: 160px;
max-width: 15vw;
display: flex !important;
justify-content: center;
align-items: center;
"
class="column rounded-borders cursor-pointer bg-active-image text-white"
>
<q-icon name="add" size="60px" color="white" />
<strong>อัปโหลดรูปภาพ</strong>
</div>
</div>
<div
v-for="n in images"
:key="n"
class="col-3"
@click="imageActive(n)"
>
<div :class="getClass(n)">
<q-img
v-if="n.avatar != null"
:src="n.avatar"
:class="imageClass(n)"
>
<!-- <div
class="absolute-top bg-transparent cursor-pointer text-right"
style="padding: 5px"
>
<q-btn
icon="delete"
unelevated
round
dense
@click="deletePhoto"
style="color: #ff8080"
/>
</div> -->
<div
class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
style="padding: 5px"
>
{{ date2Thai(n.createdDate) }}
<q-btn
v-if="!n.isActive"
icon="delete"
unelevated
dense
@click="deletePhoto(n.id)"
class="bg-white"
style="color: #ff8080"
/>
</div>
</q-img>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<!-- <q-btn
flat
round
color="red"
@click="() => {}"
icon="mdi-delete-outline"
>
<q-tooltip>ลบรูปภาพ</q-tooltip>
</q-btn> -->
<q-btn
icon="check"
dense
flat
round
@click="selectAvatarHistory"
color="positive"
>
<q-tooltip>เลือกรูปภาพ</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<!-- Dialog เลือก เกษียณ -->
<q-dialog v-model="dialogLeave" persistent>
<q-card style="width: 600px">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold"
>ประเภทการพ้นราชการ
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="closeLeave"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
v-model="reason"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
hide-bottom-space
:label="`${'ประเภทการพ้นราชการ'}`"
emit-value
map-options
option-label="name"
:options="reasonOptions"
option-value="id"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="leaveDate"
: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
class="full-width inputgreen cursor-pointer"
outlined
dense
:model-value="date2Thai(leaveDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
hide-bottom-space
:label="`${'วันที่พ้นราชการ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
autogrow
v-model="leaveDetail"
:rules="[
(val) =>
!!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
]"
hide-bottom-space
:label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
autogrow
v-model="leaveNumberOrder"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="leaveDateOrder"
: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
class="full-width inputgreen cursor-pointer"
outlined
dense
:model-value="date2Thai(leaveDateOrder)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn unelevated label="บันทึก" color="public" @click="Retire"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style>
.image-size-default {
height: 150px;
max-width: 15vw;
}
.image-size-full {
height: 160px;
max-width: 15vw;
}
.border-green {
border: 5px solid #52c688;
}
.area-div {
background-color: transparent;
}
.text-header {
font-size: 1.2em;
}
.containerimage {
position: relative;
}
.containerimage:hover .overlay {
opacity: 1;
}
.overlay {
background-color: #e4f2ffd2 !important;
opacity: 0;
padding: 2px !important;
}
.information:target {
padding-top: 84px;
}
.border-custom {
border: 0.5px solid #c3c3c3;
}
.bg-active-image {
background-color: #52c688;
}
.text-name {
font-size: 1.3em;
overflow: hidden;
}
.text-sub {
font-size: 1.3em;
overflow: hidden;
color: var(--q-primary);
}
</style>

112
src/modules/08_registryEmployee/views/Main.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
import http from "@/plugins/http";
import config from "@/app.config";
@ -15,13 +17,9 @@ import type {
import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
/** importComponents*/
import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue";
import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue";
import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue";
/** inportStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue"; //เพิ่มข้อมูลลูกจ้างชั่วคราว
import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue"; //เลือกหน่วยงานที่รับบรรจุ
import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue"; //ส่งรายชื่อไปออกคำสั่ง
const $q = useQuasar();
const router = useRouter();
@ -35,10 +33,15 @@ const {
} = useCounterMixin();
const { statusText } = useRegistryEmp();
const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
const modalSendOrder = ref<boolean>(false); //popup ส่งไปออกคำสั่ง
const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อลูกจ้างชั่วคราวที่ต้องการกำหนดตำแหน่ง
/** Table*/
const rows = ref<DataEmployee[]>([]);
const maxPage = ref<number>(0);
const total = ref<number>(0);
const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
const maxPage = ref<number>(0); //จำนวนหน้า
const total = ref<number>(0); //จำนวนข้อมูล
const queryParams = reactive({
page: 1,
pageSize: 10,
@ -46,11 +49,11 @@ const queryParams = reactive({
searchField: "fullName",
searchKeyword: "",
});
//ประเภทการค้นหา
const searchTypeOption = ref<DataOption[]>([
{ id: "fullName", name: "ชื่อ-นามสกุล" },
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -123,15 +126,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
// {
// name: "dateStart",
// align: "left",
// label: "วันที่เริ่มปฎิบัติราชการ",
// sortable: true,
// field: "dateStart",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
{
name: "salaryDate",
align: "left",
@ -192,7 +187,6 @@ const visibleColumns = ref<String[]>([
"draftPositionEmployee",
"govAge",
"dateEmployment",
// "dateStart",
"age",
"createdAt",
"dateRetireLaw",
@ -200,24 +194,11 @@ const visibleColumns = ref<String[]>([
]);
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
* ฟังก์ชันดึงข้อมูลรายชื่อลูกจ้างชั่วคราว
*/
function updatePagination(newPagination: NewPagination) {
queryParams.page = 1;
queryParams.pageSize = newPagination.rowsPerPage;
}
watch(
() => queryParams.pageSize,
() => {
fetchList();
}
);
async function fetchList() {
showLoader();
http
await http
.get(config.API.registryNew("-temp"), { params: queryParams })
.then(async (res) => {
rows.value = await res.data.result.data;
@ -232,6 +213,10 @@ async function fetchList() {
});
}
/**
* ฟังก์ชันลบข้อมูลรายชื่อลูกจ้างชั่วคราว
* @param id รายชื่อลูกจ้างชั่วคราวที่ต้องการลบ
*/
function onClickDelete(id: string) {
dialogRemove($q, async () => {
showLoader();
@ -243,36 +228,65 @@ function onClickDelete(id: string) {
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
/**
* ฟังก์ชันดูข้อมูลรายชื่อลูกจ้างชั่วคราว ไปยัง ทะเบียนประวัติลูกจ้างชั่วคราว
* @param id รายชื่อลูกจ้างชั่วคราวที่ต้องการ
*/
function redirectToPageDetail(id: string) {
router.push(`/registry-temp/${id}`);
}
/** เพิ่มข้อมูลลูกจ้างชั่วคราว*/
const modalAddEmployee = ref<boolean>(false);
/**
* ฟังก์ชันเปิด popup เพิ่มข้อมูลลูกจ้างชั่วคราว
*/
function onClickAddEmployee() {
modalAddEmployee.value = true;
}
/** เกำหนดตำแหน่ง */
const modalPos = ref<boolean>(false);
const dataRow = ref<DataEmployee>();
/**
* ฟังก์ชันเปิด popup เลือกหน่วยงานที่รับบรรจุ
*/
function onClickSelectPos(data: DataEmployee) {
modalPos.value = true;
dataRow.value = data;
}
/** ส่งไปออกคำสั่ง*/
const modalSendOrder = ref<boolean>(false);
/**
* ฟังก์ชันเปิด popup ส่งรายชื่อไปออกคำสั่ง
*/
function onClickSendOrder() {
modalSendOrder.value = true;
}
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: NewPagination) {
queryParams.page = 1;
queryParams.pageSize = newPagination.rowsPerPage;
}
/**
* ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า
*/
watch(
() => queryParams.pageSize,
() => {
fetchList();
}
);
/**
* ทำงานเมื่อมีการเรียกใข้ Components
*/
onMounted(async () => {
await fetchList();
});
@ -505,13 +519,13 @@ onMounted(async () => {
</div>
</q-card>
<DialogAddEmployee v-model:modal="modalAddEmployee" :fetchData="fetchList" />
<DialogAddEmployee v-model:modal="modalAddEmployee" :fetch-data="fetchList" />
<DialogSelectPos
v-model:modal="modalPos"
:dataRow="dataRow"
:fetchData="fetchList"
:data-row="dataRow"
:fetch-data="fetchList"
/>
<DialogSendOrder v-model:modal="modalSendOrder" :fetchData="fetchList" />
<DialogSendOrder v-model:modal="modalSendOrder" :fetch-data="fetchList" />
</template>

1045
src/modules/08_registryEmployee/views/MainOld.vue
View file

File diff suppressed because it is too large Load diff