Merge branch 'develop' into dev-tee
This commit is contained in:
setthawutttty
commit
1185971f99
59 changed files with 1000 additions and 7915 deletions
505
src/modules/05_placement/components/Receive/AddEmployee/Main.vue
Normal file
505
src/modules/05_placement/components/Receive/AddEmployee/Main.vue
Normal file
|
|
@ -0,0 +1,505 @@
|
|||
<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 handleDate = async (modelData: Date) => {
|
||||
informaData.value.birthDate = modelData;
|
||||
await calRetire(modelData);
|
||||
};
|
||||
|
||||
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;
|
||||
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("prefix", 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.receiveData(), 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("/receive");
|
||||
};
|
||||
</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"
|
||||
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 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 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="`${'เบอร์โทร'}`" :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 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 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>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import Information from "@/modules/05_placement/components/Receive/information.vue";
|
||||
import Information from "@/modules/05_placement/components/Receive/AddEmployee/Main.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,857 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import { useQuasar } from "quasar";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
import { defaultInformation } from "@/modules/04_registry/components/profileType";
|
||||
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
|
||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const props = defineProps({
|
||||
statusAdd: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
dialogMessage,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
|
||||
const inputImage = ref<any>(null);
|
||||
const image = ref<any>(null);
|
||||
const fileData = ref<any>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
const defaultCitizenData = ref<string>("");
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
|
||||
const myform = ref<QForm | null>(null);
|
||||
const dateBefore = ref<Date>(new Date());
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
// emit("update:statusEdit", false);
|
||||
defaultAdd();
|
||||
});
|
||||
|
||||
const statusAdd = () => props.statusAdd;
|
||||
|
||||
const defaultAdd = () => {
|
||||
// if (props.statusAdd) {
|
||||
edit.value = props.statusAdd;
|
||||
informaData.value = {
|
||||
cardid: "",
|
||||
age: "",
|
||||
prefix: "",
|
||||
prefixId: "",
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
birthDate: null,
|
||||
genderId: "",
|
||||
bloodId: "",
|
||||
nationality: "",
|
||||
ethnicity: "",
|
||||
statusId: "",
|
||||
religionId: "",
|
||||
tel: "",
|
||||
employeeType: "",
|
||||
employeeClass: "",
|
||||
profileType: "",
|
||||
};
|
||||
// }
|
||||
};
|
||||
|
||||
const addNewImage = async () => {
|
||||
inputImage.value.click();
|
||||
};
|
||||
|
||||
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];
|
||||
}
|
||||
|
||||
// if (profileId.value !== "") {
|
||||
// let input = e.target.files;
|
||||
// if (input.length > 0) {
|
||||
// console.log(typeof input[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;
|
||||
// }
|
||||
// }
|
||||
};
|
||||
|
||||
/**
|
||||
* get รายการ ข้อมูลเกี่ยวกับบุคคล
|
||||
*/
|
||||
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();
|
||||
});
|
||||
};
|
||||
|
||||
const changeCardID = async (value: string | number | null) => {
|
||||
if (value != null && typeof value == "string") {
|
||||
if (value.length == 13 && value != defaultCitizenData.value) {
|
||||
await checkCitizen(value);
|
||||
// informaData.value.cardid = defaultCitizenData.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const checkCitizen = async (id: string) => {
|
||||
console.log("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();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||
*/
|
||||
|
||||
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;
|
||||
case "employeeClassOps":
|
||||
update(() => {
|
||||
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeTypeOps":
|
||||
update(() => {
|
||||
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDate = async (modelData: Date) => {
|
||||
informaData.value.birthDate = modelData;
|
||||
await calRetire(modelData);
|
||||
};
|
||||
|
||||
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;
|
||||
changeRetireText(data.retireDate);
|
||||
dateBefore.value = birth;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = null;
|
||||
informaData.value.age = "";
|
||||
// dateBefore.value;
|
||||
// changeRetireText(null);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const addData = async () => {
|
||||
showLoader();
|
||||
|
||||
// const formData = {
|
||||
// CitizenId: informaData.value.cardid,
|
||||
// Prefix: informaData.value.prefixId,
|
||||
// Firstname: informaData.value.firstname,
|
||||
// Lastname: informaData.value.lastname,
|
||||
// Gender: informaData.value.genderId,
|
||||
// Nationality: informaData.value.nationality,
|
||||
// Race: informaData.value.ethnicity,
|
||||
// Religion: informaData.value.religionId,
|
||||
// DateOfBirth: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
|
||||
// BloodGroup: informaData.value.bloodId,
|
||||
// Relationship: informaData.value.statusId,
|
||||
// TelephoneNumber: informaData.value.tel,
|
||||
// };
|
||||
|
||||
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("Prefix", 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("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(
|
||||
"DateOfBirth",
|
||||
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);
|
||||
|
||||
await http
|
||||
.post(config.API.receiveData(), formData)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
router.push("/receive");
|
||||
});
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
console.log(myform.value);
|
||||
if (myform.value != null) {
|
||||
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
||||
if (saveDataTest) {
|
||||
addData();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 v-else :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-px-lg q-py-md">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลส่วนตัว"
|
||||
icon="mdi-account"
|
||||
:save="saveData"
|
||||
:history="!statusAdd()"
|
||||
:addEmployee="statusAdd()"
|
||||
/>
|
||||
<!-- :disable="statusEdit" -->
|
||||
<q-form ref="myform" class="col-12">
|
||||
<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">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
v-model="informaData.cardid"
|
||||
dense
|
||||
@update:model-value="changeCardID"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val:string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||
</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="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
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.firstname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
: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="informaData.lastname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<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="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
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
: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="
|
||||
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(false)"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
:style="!edit ? '' : 'padding:0 12px;'"
|
||||
:model-value="informaData.age"
|
||||
:label="`${'อายุ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
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-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
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
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.nationality"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.ethnicity"
|
||||
:label="`${'เชื้อชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
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-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:outlined="edit"
|
||||
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="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
type="tel"
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
mask="##########"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val:string) =>
|
||||
val.length >= 10 ||
|
||||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<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="informaData.employeeType"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeTypeOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทการจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<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="informaData.employeeClass"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeClassOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทลูกจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
@click="saveData"
|
||||
/>
|
||||
</div>
|
||||
<q-separator />
|
||||
</q-card>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue