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

UI เบอร์ email

Browse source
This commit is contained in:
setthawutttty 2024-10-16 09:47:38 +07:00
parent f340a0f8c2
commit 20a989cafa
1 changed files with 155 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

159
src/modules/10_registry/01_Information/01_Information.vue
View file

@ -12,8 +12,11 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
const $q = useQuasar();
const store = useRegistryInFormationStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
mixin;
const editPhone = ref<boolean>(false);
const editEmail = ref<boolean>(false);
const rowsHistory = ref<any[]>([]);
const modalHistory = ref<boolean>(false);
@ -31,8 +34,10 @@ const formDataInformation = reactive<any>({
religion: "", //ศาสนา
bloodGroup: "", //หมู่เลือด
phone: "", //เบอร์โทร
email: "",
});
const emailVerify = ref<boolean | null>(null);
const visibleColumnsHistory = ref<string[]>([
"citizenId",
"prefix",
@ -277,6 +282,39 @@ function getHistory() {
});
}
function onUndo(type: string) {
if (type == "phone") {
editPhone.value = false;
} else {
editEmail.value = false;
}
}
function onSubmitEdit(type: string) {
dialogConfirm(
$q,
() => {
if (type == "phone") {
onSavePhone();
} else {
onSaveEmail();
}
},
`ยืนยันการบันทึก${type == "phone" ? "(เบอร์โทร)" : "(Email)"}`
);
}
/** บันทึกเบอร์โทร */
function onSavePhone() {
editPhone.value = false;
}
/** บันทึก email */
function onSaveEmail() {
emailVerify.value = false;
editEmail.value = false;
}
onMounted(() => {
getData();
});
@ -403,9 +441,122 @@ onMounted(() => {
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
<div class="col-7">
{{ formDataInformation.phone ? formDataInformation.phone : "-" }}
<div class="col-4 text-grey-6 text-weight-medium">เบอร์โทร</div>
<div class="col-8">
<div class="row q-gutter-sm">
<q-input
dense
outlined
v-model="formDataInformation.phone"
:readonly="!editPhone"
mask="##########"
style="width: 300px"
:class="editPhone ? 'inputgreen' : ''"
>
</q-input>
<div v-if="editPhone == false" class="self-center">
<q-btn
dense
flat
round
icon="edit"
color="edit"
@click="() => (editPhone = true)"
>
<q-tooltip>แก้ไข</q-tooltip>
</q-btn>
</div>
<div v-else class="self-center">
<q-btn
dense
flat
round
icon="save"
color="primary"
@click="onSubmitEdit('phone')"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<q-btn
dense
flat
round
icon="undo"
color="red"
@click="onUndo('phone')"
>
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-grey-6 text-weight-medium">อีเมล</div>
<div class="col-8">
<div class="row no-wrap q-gutter-sm">
<q-input
dense
outlined
v-model="formDataInformation.email"
:readonly="!editEmail"
type="email"
suffix="@bangkok.go.th"
style="width: 300px"
:class="editEmail ? 'inputgreen' : ''"
>
</q-input>
<div
v-if="emailVerify == null || emailVerify == true"
class="self-center"
>
<div v-if="editEmail == false">
<q-btn
dense
flat
round
icon="edit"
color="edit"
@click="() => (editEmail = true)"
>
<q-tooltip>แก้ไข</q-tooltip>
</q-btn>
</div>
<div v-else class="self-center">
<q-btn
dense
flat
round
icon="save"
color="primary"
@click="onSubmitEdit('email')"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<q-btn
dense
flat
round
icon="undo"
color="red"
@click="onUndo('email')"
>
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
</div>
</div>
<div v-else class="self-center">
<q-icon
name="mdi-alert-box"
color="warning"
size="sm"
class="selft-center"
>
<q-tooltip>รอยืนยันอีเมล</q-tooltip>
</q-icon>
</div>
</div>
</div>
</div>
</div>