82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<Caption v-bind="{ title: 'Tạo mã duyệt' }"></Caption>
|
|
<article class="message is-dark">
|
|
<div class="message-body py-2 mt-5 has-text-dark">
|
|
Khi thực hiện các tác vụ quan trọng như giải ngân, hạch toán...hệ thống sẽ yêu cầu nhập mã đuyệt. Mã duyệt là
|
|
một chuỗi gồm 4 chữ số, hãy ghi nhớ mã này
|
|
</div>
|
|
</article>
|
|
|
|
<div class="field is-grouped mt-5">
|
|
<div
|
|
class="control mr-5"
|
|
v-for="v in [1, 2, 3, 4]"
|
|
>
|
|
<input
|
|
class="input is-dark"
|
|
style="font-size: 18px; max-width: 40px; font-weight: bold; text-align: center"
|
|
type="password"
|
|
maxlength="1"
|
|
:id="`input${v}`"
|
|
v-model="data[v]"
|
|
@keyup="changeNext(v)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<a @click="reset()">Nhập lại</a>
|
|
</div>
|
|
<div class="mt-5 pt-3">
|
|
<button
|
|
class="button is-primary"
|
|
@click="confirm()"
|
|
>
|
|
Xác nhận
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
data: {},
|
|
code: undefined,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.reset();
|
|
},
|
|
methods: {
|
|
async confirm() {
|
|
if (this.checkError()) return this.$snackbar("Mã phê duyệt gồm 4 số từ 0-9");
|
|
let user = await this.$getdata("user", { first: true, filter: { id: this.$store.state.login.id } });
|
|
user.approval_code = this.code;
|
|
await this.$updateapi("user", user);
|
|
},
|
|
checkError() {
|
|
if (Object.keys(this.data).length < 4) return true;
|
|
let code = "";
|
|
for (let val in this.data) {
|
|
if (!this.$empty(val)) code += val.toString();
|
|
}
|
|
if (this.$empty(code) || !this.$isNumber(code)) return true;
|
|
this.code = code;
|
|
return false;
|
|
},
|
|
changeNext(v) {
|
|
if (this.$empty(this.data[v])) return;
|
|
else if (v === 4) return this.checkError();
|
|
let doc = document.getElementById(`input${v + 1}`);
|
|
if (doc) doc.focus();
|
|
},
|
|
reset() {
|
|
this.data = {};
|
|
let doc = document.getElementById(`input1`);
|
|
if (doc) doc.focus();
|
|
},
|
|
},
|
|
};
|
|
</script>
|