feat(receive): add input rank
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
29b45f77ea
commit
0739f2b9d7
3 changed files with 132 additions and 11 deletions
|
|
@ -48,6 +48,7 @@ const informaData = ref<FormAddPerson>({
|
|||
employeeType: null,
|
||||
employeeClass: null,
|
||||
profileType: null,
|
||||
rank: "",
|
||||
});
|
||||
|
||||
// รายการข้อมูลทั้งหมด
|
||||
|
|
@ -60,6 +61,7 @@ const Ops = ref<InformationOps>({
|
|||
religionOps: [],
|
||||
employeeClassOps: [],
|
||||
employeeTypeOps: [],
|
||||
rankOps: [],
|
||||
});
|
||||
// ข้อมูลเมื่อเลือกแล้ว
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
|
|
@ -71,6 +73,7 @@ const OpsFilter = ref<InformationOps>({
|
|||
religionOps: [],
|
||||
employeeClassOps: [],
|
||||
employeeTypeOps: [],
|
||||
rankOps: [],
|
||||
});
|
||||
|
||||
// รูป profile
|
||||
|
|
@ -135,6 +138,16 @@ async function fetchPerson() {
|
|||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
|
||||
let rank: DataOption[] = [];
|
||||
data.rank.map((r: DataOptioninfo) => {
|
||||
rank.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.rankOps = rank;
|
||||
OpsFilter.value.rankOps = rank;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -204,7 +217,13 @@ function filterSelector(val: string, update: Function, refData: string) {
|
|||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case "rankOps":
|
||||
update(() => {
|
||||
Ops.value.rankOps = OpsFilter.value.rankOps.filter(
|
||||
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -227,7 +246,7 @@ function onSubmit() {
|
|||
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)
|
||||
if (informaData.value.prefix != undefined && informaData.value.prefix != "")
|
||||
formData.append("prefix", informaData.value.prefix);
|
||||
if (informaData.value.firstName != undefined)
|
||||
formData.append("firstName", informaData.value.firstName);
|
||||
|
|
@ -256,6 +275,8 @@ function onSubmit() {
|
|||
formData.append("employeeType", informaData.value.employeeType);
|
||||
if (informaData.value.employeeClass != undefined)
|
||||
formData.append("employeeClass", informaData.value.employeeClass);
|
||||
if (informaData.value.rank != undefined && informaData.value.rank != "")
|
||||
formData.append("rank", informaData.value.rank);
|
||||
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
|
|
@ -289,6 +310,15 @@ function updateBirthDate(v: Date) {
|
|||
age.value = calculateAge(v);
|
||||
}
|
||||
|
||||
function prefixRankRule() {
|
||||
return [
|
||||
() =>
|
||||
!!informaData.value.rank ||
|
||||
!!informaData.value.prefix ||
|
||||
"กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
|
|
@ -383,7 +413,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<q-card-section class="q-px-lg">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
outlined
|
||||
|
|
@ -404,13 +434,14 @@ onMounted(async () => {
|
|||
mask="#############"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
bg-color="white"
|
||||
v-model="informaData.prefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
outlined
|
||||
dense
|
||||
clearable
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
:options="Ops.prefixOps"
|
||||
|
|
@ -418,11 +449,8 @@ onMounted(async () => {
|
|||
option-value="name"
|
||||
map-options
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val:string) => {
|
||||
return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
|
||||
},
|
||||
]"
|
||||
:rules="prefixRankRule()"
|
||||
reactive-rules
|
||||
emit-value
|
||||
use-input
|
||||
hide-selected
|
||||
|
|
@ -432,6 +460,32 @@ onMounted(async () => {
|
|||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
bg-color="white"
|
||||
v-model="informaData.rank"
|
||||
label="ยศ"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
clearable
|
||||
class="inputgreen"
|
||||
:options="Ops.rankOps"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
map-options
|
||||
hide-bottom-space
|
||||
:rules="prefixRankRule()"
|
||||
reactive-rules
|
||||
emit-value
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
@filter="(inputValue:string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
bg-color="white"
|
||||
|
|
|
|||
|
|
@ -113,6 +113,7 @@ const Ops = ref<InformationOps>({
|
|||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
rankOps: [],
|
||||
});
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
|
|
@ -129,6 +130,7 @@ const OpsFilter = ref<InformationOps>({
|
|||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
rankOps: [],
|
||||
});
|
||||
|
||||
/** ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)*/
|
||||
|
|
@ -186,6 +188,16 @@ async function fetchPerson() {
|
|||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
|
||||
let rank: DataOption[] = [];
|
||||
data.rank.map((r: DataOptioninfo) => {
|
||||
rank.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.rankOps = rank;
|
||||
OpsFilter.value.rankOps = rank;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -230,6 +242,7 @@ async function getData() {
|
|||
(data.prefix == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.prefix) ?? "",
|
||||
rank: data.rank ?? "",
|
||||
firstname: data.firstName ?? "",
|
||||
lastname: data.lastName ?? "",
|
||||
birthDate:
|
||||
|
|
@ -295,6 +308,7 @@ async function fetchData(data: any) {
|
|||
(data.prefix == "00000000-0000-0000-0000-000000000000"
|
||||
? null
|
||||
: data.prefix) ?? "",
|
||||
rank: data.rank ?? "",
|
||||
firstname: data.firstName ?? "",
|
||||
lastname: data.lastName ?? "",
|
||||
birthDate: data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
|
||||
|
|
@ -436,6 +450,14 @@ function filterSelector(val: string, update: Function, refData: string) {
|
|||
});
|
||||
break;
|
||||
|
||||
case "rankOps":
|
||||
update(() => {
|
||||
Ops.value.rankOps = OpsFilter.value.rankOps.filter(
|
||||
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -470,6 +492,7 @@ function saveData() {
|
|||
positionNumberOld: posNo.value,
|
||||
amount: 0,
|
||||
amountOld: salary.value,
|
||||
rank: informaData.value.rank,
|
||||
};
|
||||
showLoader();
|
||||
http
|
||||
|
|
@ -517,6 +540,15 @@ function updateBirthDate(v: Date) {
|
|||
informaData.value.age = calculateAge(v);
|
||||
}
|
||||
|
||||
function prefixRankRule() {
|
||||
return [
|
||||
() =>
|
||||
!!informaData.value.rank ||
|
||||
!!informaData.value.prefixId ||
|
||||
"กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
|
||||
];
|
||||
}
|
||||
|
||||
/** ทำงานเมื่อมีการเรียกใช้ Components*/
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
|
|
@ -598,7 +630,7 @@ onMounted(async () => {
|
|||
<div class="col-xs-12">
|
||||
<div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
|
|
@ -614,7 +646,7 @@ onMounted(async () => {
|
|||
mask="#############"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
|
|
@ -634,10 +666,42 @@ onMounted(async () => {
|
|||
option-value="name"
|
||||
:label="`${'คำนำหน้าชื่อ'}`"
|
||||
use-input
|
||||
clearable
|
||||
input-debounce="0"
|
||||
:rules="prefixRankRule()"
|
||||
reactive-rules
|
||||
@filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps' ) "
|
||||
/>
|
||||
</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.rank"
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
fill-input
|
||||
:rules="prefixRankRule()"
|
||||
option-label="name"
|
||||
:options="Ops.rankOps"
|
||||
option-value="name"
|
||||
:label="`${'ยศ'}`"
|
||||
reactive-rules
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'rankOps' ) "
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ interface InformationOps {
|
|||
religionOps: DataOption[];
|
||||
employeeClassOps: DataOption[];
|
||||
employeeTypeOps: DataOption[];
|
||||
rankOps: DataOption[];
|
||||
}
|
||||
|
||||
//ข้อมูลส่วนตัว
|
||||
|
|
@ -63,6 +64,7 @@ interface FormAddPerson {
|
|||
employeeType: string | null;
|
||||
employeeClass: string | null;
|
||||
profileType: string | null;
|
||||
rank?: string;
|
||||
}
|
||||
|
||||
const defaultInformation: Information = {
|
||||
|
|
@ -83,6 +85,7 @@ const defaultInformation: Information = {
|
|||
employeeType: null,
|
||||
employeeClass: null,
|
||||
profileType: null,
|
||||
rank: null,
|
||||
};
|
||||
|
||||
export { defaultInformation };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue