65 lines
2.0 KiB
Vue
65 lines
2.0 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', undefined, {filter: {id: this.$store.state.login.id}}, true)
|
|
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> |