Refactoring code module 05_placement
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
202fbf27b6
commit
4678ead38e
75 changed files with 3110 additions and 10795 deletions
|
|
@ -1,927 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch } 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,
|
||||
DataOptioninfo,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
import type {
|
||||
InformationOps,
|
||||
FormAddPerson,
|
||||
DataType,
|
||||
} from "@/modules/04_registry/interface/index/Main";
|
||||
import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
|
||||
|
||||
const retireDate = ref<Date>();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText } = profileStore;
|
||||
|
||||
const age = ref<string | null>("");
|
||||
|
||||
const informaData = ref<FormAddPerson>({
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
citizenId: "",
|
||||
birthDate: null,
|
||||
age: null,
|
||||
genderId: null,
|
||||
bloodId: null,
|
||||
nationality: null,
|
||||
ethnicity: null,
|
||||
statusId: null,
|
||||
religionId: null,
|
||||
tel: null,
|
||||
employeeType: null,
|
||||
employeeClass: null,
|
||||
profileType: 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: [],
|
||||
});
|
||||
|
||||
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
|
||||
const fetchPerson = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewMetaMain)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let optionbloodGroups: DataOption[] = [];
|
||||
data.bloodGroups.map((r: DataOptioninfo) => {
|
||||
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: DataOptioninfo) => {
|
||||
optiongenders.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.genderOps = optiongenders;
|
||||
OpsFilter.value.genderOps = optiongenders;
|
||||
|
||||
let optionprefixs: DataOption[] = [];
|
||||
optionprefixs = data.prefixs.map((v: any) => ({
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
}));
|
||||
|
||||
Ops.value.prefixOps = optionprefixs;
|
||||
OpsFilter.value.prefixOps = optionprefixs;
|
||||
|
||||
let optionrelationships: DataOption[] = [];
|
||||
data.relationships.map((r: DataOptioninfo) => {
|
||||
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: DataOptioninfo) => {
|
||||
optionreligions.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* function เช็คเลขประจำตัวประชาชนช้ำ
|
||||
* @param id เลขประจำตัวประชาชน
|
||||
*/
|
||||
const checkCitizen = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.profileNewCitizenId(id), {
|
||||
citizenId: id,
|
||||
})
|
||||
.then(() => {})
|
||||
.catch((err) => {
|
||||
if (err.response.data.status === 500) {
|
||||
dialogMessageNotify($q, err.response.data.message);
|
||||
} else {
|
||||
messageError($q, err);
|
||||
}
|
||||
})
|
||||
.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.setFullYear(today.getFullYear() - 18);
|
||||
return today;
|
||||
};
|
||||
|
||||
// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
|
||||
const onSubmit = async () => {
|
||||
const formData = new FormData();
|
||||
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
||||
if (informaData.value.citizenId != undefined)
|
||||
formData.append("citizenId", informaData.value.citizenId);
|
||||
if (informaData.value.prefix != undefined)
|
||||
formData.append("prefix", informaData.value.prefix);
|
||||
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("gender", 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("religion", 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("bloodGroup", informaData.value.bloodId);
|
||||
if (informaData.value.statusId != undefined)
|
||||
formData.append("relationship", 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);
|
||||
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.receiveData(), formData)
|
||||
.then(async (res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
await clickBack();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// ปุ่ม back
|
||||
const clickBack = () => {
|
||||
router.push("/placement/receive");
|
||||
};
|
||||
|
||||
function calculateAge(birthDate: Date | null) {
|
||||
if (!birthDate) return null;
|
||||
const birthDateTimeStamp = new Date(birthDate).getTime();
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - birthDateTimeStamp;
|
||||
|
||||
const ageDate = new Date(diff);
|
||||
const years = ageDate.getUTCFullYear() - 1970;
|
||||
const months = ageDate.getUTCMonth();
|
||||
const days = ageDate.getUTCDate() - 1;
|
||||
const retire = new Date(birthDate);
|
||||
retire.setFullYear(retire.getFullYear() + 60);
|
||||
retireDate.value = retire;
|
||||
|
||||
if (years > 60) {
|
||||
return "อายุเกิน 60 ปี";
|
||||
}
|
||||
|
||||
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => informaData.value.birthDate,
|
||||
(v) => {
|
||||
if (v) {
|
||||
age.value = calculateAge(v);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
});
|
||||
</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.citizenId"
|
||||
dense
|
||||
@update:model-value="changeCardID"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val: string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<selector
|
||||
hide-bottom-space
|
||||
outlined
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.prefix"
|
||||
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
|
||||
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
|
||||
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="handleDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
: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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
type="tel"
|
||||
v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
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
|
||||
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.push(`/placement/receive`)"
|
||||
>
|
||||
</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
|
||||
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 -->
|
||||
|
||||
<q-card flat bordered class="col-12">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<HeaderTop
|
||||
header="ข้อมูลส่วนตัว"
|
||||
icon="mdi-account"
|
||||
class="q-px-lg q-pt-md"
|
||||
/>
|
||||
<q-card-section class="q-px-lg">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="informaData.citizenId"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
class="inputgreen"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
|
||||
(val: string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
maxlength="13"
|
||||
hide-bottom-space
|
||||
mask="#############"
|
||||
@update:model-value="changeCardID"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
bg-color="white"
|
||||
v-model="informaData.prefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
:options="Ops.prefixOps"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
map-options
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val) => {
|
||||
return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
|
||||
},
|
||||
]"
|
||||
emit-value
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="informaData.firstName"
|
||||
label="ชื่อ"
|
||||
dense
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
borderless
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="informaData.lastName"
|
||||
label="นามสกุล"
|
||||
class="inputgreen"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:max-date="calculateMaxDate()"
|
||||
:enableTimePicker="false"
|
||||
menu-class-name="modalfix"
|
||||
v-model="informaData.birthDate"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="inputDatereceive"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
informaData.birthDate != null
|
||||
? date2Thai(informaData.birthDate)
|
||||
: null
|
||||
"
|
||||
label="วัน/เดือน/ปี เกิด"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="inputgreen"
|
||||
v-model="age"
|
||||
label="อายุ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
v-model="informaData.genderId"
|
||||
class="inputgreen"
|
||||
:options="Ops.genderOps"
|
||||
label="เพศ"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
class="inputgreen"
|
||||
v-model="informaData.statusId"
|
||||
:options="Ops.statusOps"
|
||||
label="สถานภาพ"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="informaData.nationality"
|
||||
label="สัญชาติ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="informaData.ethnicity"
|
||||
label="เชื้อชาติ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.religionId"
|
||||
class="inputgreen"
|
||||
:options="Ops.religionOps"
|
||||
label="ศาสนา"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.bloodId"
|
||||
class="inputgreen"
|
||||
:options="Ops.bloodOps"
|
||||
label="หมู่เลือด"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
mask="##########"
|
||||
class="inputgreen"
|
||||
v-model="informaData.tel"
|
||||
label="เบอร์โทร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
editvisible: Boolean,
|
||||
modalEdit: Boolean,
|
||||
cancel: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
edit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
save: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits([
|
||||
"update:editvisible",
|
||||
"update:next",
|
||||
"update:previous",
|
||||
]);
|
||||
|
||||
const updateEdit = (value: Boolean) => {
|
||||
emit("update:editvisible", value);
|
||||
};
|
||||
// const cancel = async () => {
|
||||
// props.cancel();
|
||||
// };
|
||||
const edit = async () => {
|
||||
updateEdit(!props.editvisible);
|
||||
props.edit();
|
||||
};
|
||||
const checkSave = () => {
|
||||
props.validate();
|
||||
props.save();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-card-actions class="text-primary">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!editvisible"
|
||||
outline
|
||||
:disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'"
|
||||
@click="edit"
|
||||
><!-- icon="mdi-pencil-outline"
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
|
||||
</q-btn>
|
||||
<div v-else>
|
||||
<q-btn
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
:disabled="!editvisible"
|
||||
:color="!editvisible ? 'grey-7' : 'public'"
|
||||
@click="checkSave"
|
||||
>
|
||||
</q-btn
|
||||
><!-- icon="mdi-content-save-outline">
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</div>
|
||||
</q-card-actions>
|
||||
</template>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
close: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const close = async () => {
|
||||
props.close();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="q-py-sm">
|
||||
<q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="close"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
color: #35373c;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watchEffect } from "vue";
|
||||
import { ref, watchEffect } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { ResponseRow } from "@/modules/05_placement/interface/response/Receive";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { ResponseRow } from "@/modules/05_placement/interface/response/Receive";
|
||||
|
||||
import { useTransferDataStore } from "@/modules/05_placement/store";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
const transferStore = useTransferDataStore();
|
||||
const { statusText } = transferStore;
|
||||
const $q = useQuasar();
|
||||
|
|
@ -24,17 +26,20 @@ const {
|
|||
date2Thai,
|
||||
} = mixin;
|
||||
|
||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const visibleColumns2 = ref<string[]>([
|
||||
"no",
|
||||
"citizenId",
|
||||
"fullname",
|
||||
"organizationName",
|
||||
"dateOfBirth",
|
||||
"createdAt",
|
||||
"status",
|
||||
]);
|
||||
//หัวตาราง
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
clickClose: Function,
|
||||
fecthlistRecevice: Function,
|
||||
nextPage: Function,
|
||||
rows2: Array,
|
||||
filterKeyword2: String,
|
||||
});
|
||||
const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
|
||||
|
||||
//Table
|
||||
const columns2 = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -113,69 +118,74 @@ const columns2 = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns2 = ref<string[]>([
|
||||
"no",
|
||||
"citizenId",
|
||||
"fullname",
|
||||
"organizationName",
|
||||
"dateOfBirth",
|
||||
"createdAt",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
Modal: Boolean,
|
||||
clickClose: Function,
|
||||
fecthlistRecevice: Function,
|
||||
nextPage: Function,
|
||||
rows2: Array,
|
||||
filterKeyword2: String,
|
||||
});
|
||||
|
||||
const checkSelected = computed(() => {
|
||||
if (selected.value.length === 0) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
//popup ยืนยันส่งัว
|
||||
const saveOrder = () => {
|
||||
/**
|
||||
* ฟังก์ชันยืนยันการส่งออกคำสั่ง
|
||||
*/
|
||||
function saveOrder() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => Ordersave(),
|
||||
async () => {
|
||||
const id = selected.value.map((r: ResponseRow) => r.id);
|
||||
const body = {
|
||||
id,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.receiveReport, body)
|
||||
.then(async () => {
|
||||
await props.fecthlistRecevice?.();
|
||||
success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
|
||||
props.clickClose?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันส่งไปออกคำสั่ง",
|
||||
"ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
|
||||
);
|
||||
};
|
||||
//ส่งไปออกคำสั่ง
|
||||
const Ordersave = async () => {
|
||||
const id = selected.value.map((r: ResponseRow) => r.id);
|
||||
const body = {
|
||||
id,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.receiveReport, body)
|
||||
.then((res: any) => {
|
||||
success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
|
||||
props.clickClose?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
props.fecthlistRecevice?.();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
|
||||
const updateInput = (value: any) => {
|
||||
/**
|
||||
* ฟังก์ชันอัปเดทค่าในช่องค้นหา
|
||||
*/
|
||||
function updateInput(value: any) {
|
||||
emit("update:filterKeyword2", value);
|
||||
};
|
||||
//รีเซ็ตค่าในช่องค้นหา
|
||||
const Reset = () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันรีเซ็ตค่าในช่องค้นหา
|
||||
*/
|
||||
function onReset() {
|
||||
emit("update:filterKeyword2", "");
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* เมื่อ props.modal เป็น true
|
||||
*
|
||||
* กำหนดให้ selected เป็นค่าว่าง
|
||||
*/
|
||||
watchEffect(() => {
|
||||
if (props.Modal === true) {
|
||||
if (props.modal === true) {
|
||||
selected.value = [];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="props.Modal">
|
||||
<q-dialog v-model="props.modal">
|
||||
<q-card style="width: 1200px; max-width: 80vw">
|
||||
<DialogHeader :tittle="'ส่งไปออกคำสั่งรับโอน'" :close="clickClose" />
|
||||
<q-separator />
|
||||
|
|
@ -199,7 +209,7 @@ watchEffect(() => {
|
|||
v-if="filterKeyword2 !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="Reset"
|
||||
@click="onReset"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -317,7 +327,7 @@ watchEffect(() => {
|
|||
<q-btn
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
@click="saveOrder"
|
||||
:disable="checkSelected"
|
||||
:disable="selected.length === 0"
|
||||
color="public"
|
||||
><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
|
||||
>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import Information from "@/modules/05_placement/components/Receive/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">
|
||||
<Information :statusAdd="true" />
|
||||
</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>
|
||||
771
src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
Normal file
771
src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
Normal file
|
|
@ -0,0 +1,771 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QForm } from "quasar";
|
||||
import type {
|
||||
DataOption,
|
||||
DataOptioninfo,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
import type {
|
||||
InformationOps,
|
||||
FormAddPerson,
|
||||
} from "@/modules/04_registry/interface/index/Main";
|
||||
|
||||
import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
|
||||
|
||||
const retireDate = ref<Date>();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
|
||||
const age = ref<string | null>("");
|
||||
const defaultCitizenData = ref<string>("");
|
||||
const informaData = ref<FormAddPerson>({
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
citizenId: "",
|
||||
birthDate: null,
|
||||
age: null,
|
||||
genderId: null,
|
||||
bloodId: null,
|
||||
nationality: null,
|
||||
ethnicity: null,
|
||||
statusId: null,
|
||||
religionId: null,
|
||||
tel: null,
|
||||
employeeType: null,
|
||||
employeeClass: null,
|
||||
profileType: null,
|
||||
});
|
||||
|
||||
// รายการข้อมูลทั้งหมด
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [],
|
||||
employeeTypeOps: [],
|
||||
});
|
||||
// ข้อมูลเมื่อเลือกแล้ว
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [],
|
||||
employeeTypeOps: [],
|
||||
});
|
||||
|
||||
// รูป profile
|
||||
const inputImage = ref<any>(null);
|
||||
const image = ref<any>(null);
|
||||
const fileData = ref<any>(null);
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)
|
||||
*/
|
||||
async function fetchPerson() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewMetaMain)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let optionbloodGroups: DataOption[] = [];
|
||||
data.bloodGroups.map((r: DataOptioninfo) => {
|
||||
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: DataOptioninfo) => {
|
||||
optiongenders.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.genderOps = optiongenders;
|
||||
OpsFilter.value.genderOps = optiongenders;
|
||||
|
||||
let optionprefixs: DataOption[] = [];
|
||||
optionprefixs = data.prefixs.map((v: any) => ({
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
}));
|
||||
|
||||
Ops.value.prefixOps = optionprefixs;
|
||||
OpsFilter.value.prefixOps = optionprefixs;
|
||||
|
||||
let optionrelationships: DataOption[] = [];
|
||||
data.relationships.map((r: DataOptioninfo) => {
|
||||
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: DataOptioninfo) => {
|
||||
optionreligions.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function uploadImage(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
|
||||
*/
|
||||
function addNewImage() {
|
||||
inputImage.value.click();
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันตรวจสอบเลขบัตรประจำตัวประชาชน
|
||||
* @param value เลขบัตรประจำตัวประชาชน
|
||||
*/
|
||||
async function changeCardID(value: string | number | null) {
|
||||
if (value != null && typeof value == "string") {
|
||||
if (value.length == 13 && value != defaultCitizenData.value) {
|
||||
await checkCitizen(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันยิง API ตรวจสอบเลขบัตรประจำตัวประชาชนซ้ำ
|
||||
* @param value เลขบัตรประจำตัวประชาชน
|
||||
*/
|
||||
async function checkCitizen(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.profileNewCitizenId(id), {
|
||||
citizenId: id,
|
||||
})
|
||||
.then(() => {})
|
||||
.catch((err) => {
|
||||
if (err.response.data.status === 500) {
|
||||
dialogMessageNotify($q, err.response.data.message);
|
||||
} else {
|
||||
messageError($q, err);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, 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 น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
|
||||
*/
|
||||
function calculateMaxDate() {
|
||||
const today = new Date();
|
||||
today.setFullYear(today.getFullYear() - 18);
|
||||
return today;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันยืนยันการบันทึกข้อมูล
|
||||
*/
|
||||
function onSubmit() {
|
||||
const formData = new FormData();
|
||||
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
||||
if (informaData.value.citizenId != undefined)
|
||||
formData.append("citizenId", informaData.value.citizenId);
|
||||
if (informaData.value.prefix != undefined)
|
||||
formData.append("prefix", informaData.value.prefix);
|
||||
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("gender", 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("religion", 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("bloodGroup", informaData.value.bloodId);
|
||||
if (informaData.value.statusId != undefined)
|
||||
formData.append("relationship", 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);
|
||||
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.receiveData(), formData)
|
||||
.then(async () => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
clickBack();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันกลับไปหน้ารายการรายการรับโอน
|
||||
*/
|
||||
function clickBack() {
|
||||
router.push("/placement/receive");
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันคำนวนอายุ
|
||||
* @param birthDate วันเดือยปีเกิด
|
||||
* @returns อายุ แบบ ปี เดือน วัน
|
||||
*/
|
||||
function calculateAge(birthDate: Date | null) {
|
||||
if (!birthDate) return null;
|
||||
const birthDateTimeStamp = new Date(birthDate).getTime();
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - birthDateTimeStamp;
|
||||
|
||||
const ageDate = new Date(diff);
|
||||
const years = ageDate.getUTCFullYear() - 1970;
|
||||
const months = ageDate.getUTCMonth();
|
||||
const days = ageDate.getUTCDate() - 1;
|
||||
const retire = new Date(birthDate);
|
||||
retire.setFullYear(retire.getFullYear() + 60);
|
||||
retireDate.value = retire;
|
||||
|
||||
if (years > 60) {
|
||||
return "อายุเกิน 60 ปี";
|
||||
}
|
||||
|
||||
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดทวันเดือนปีเกิด
|
||||
* @param v วันเดือยปีเกิด
|
||||
*/
|
||||
function updateBirthDate(v: Date) {
|
||||
age.value = calculateAge(v);
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
});
|
||||
</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">
|
||||
<!-- 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.push(`/placement/receive`)"
|
||||
>
|
||||
</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
|
||||
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>
|
||||
|
||||
<q-card flat bordered class="col-12">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<HeaderTop
|
||||
header="ข้อมูลส่วนตัว"
|
||||
icon="mdi-account"
|
||||
class="q-px-lg q-pt-md"
|
||||
/>
|
||||
<q-card-section class="q-px-lg">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="informaData.citizenId"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
class="inputgreen"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
|
||||
(val: string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
maxlength="13"
|
||||
hide-bottom-space
|
||||
mask="#############"
|
||||
@update:model-value="changeCardID"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
bg-color="white"
|
||||
v-model="informaData.prefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
:options="Ops.prefixOps"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
map-options
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val) => {
|
||||
return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
|
||||
},
|
||||
]"
|
||||
emit-value
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="informaData.firstName"
|
||||
label="ชื่อ"
|
||||
dense
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
borderless
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="informaData.lastName"
|
||||
label="นามสกุล"
|
||||
class="inputgreen"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:max-date="calculateMaxDate()"
|
||||
:enableTimePicker="false"
|
||||
menu-class-name="modalfix"
|
||||
v-model="informaData.birthDate"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateBirthDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="inputDatereceive"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
informaData.birthDate != null
|
||||
? date2Thai(informaData.birthDate)
|
||||
: null
|
||||
"
|
||||
label="วัน/เดือน/ปี เกิด"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="inputgreen"
|
||||
v-model="age"
|
||||
label="อายุ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
v-model="informaData.genderId"
|
||||
class="inputgreen"
|
||||
:options="Ops.genderOps"
|
||||
label="เพศ"
|
||||
@filter="(inputValue:string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
class="inputgreen"
|
||||
v-model="informaData.statusId"
|
||||
:options="Ops.statusOps"
|
||||
label="สถานภาพ"
|
||||
@filter="(inputValue:string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="informaData.nationality"
|
||||
label="สัญชาติ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="informaData.ethnicity"
|
||||
label="เชื้อชาติ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.religionId"
|
||||
class="inputgreen"
|
||||
:options="Ops.religionOps"
|
||||
label="ศาสนา"
|
||||
@filter="(inputValue:string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
clearable
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.bloodId"
|
||||
class="inputgreen"
|
||||
:options="Ops.bloodOps"
|
||||
label="หมู่เลือด"
|
||||
@filter="(inputValue:string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
mask="##########"
|
||||
class="inputgreen"
|
||||
v-model="informaData.tel"
|
||||
label="เบอร์โทร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</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>
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue