111 lines
4.1 KiB
Vue
111 lines
4.1 KiB
Vue
<template>
|
|
<div v-if="record">
|
|
<div class="columns is-multiline mx-0">
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Username<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.username" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.fullname">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.fullname">{{errors.fullname}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<SearchBox v-bind="{api:'usertype', field:'name', column:['name'], first:true, optionid:record.type, disabled: true}"
|
|
@option="selected('_type', $event)"></SearchBox>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.type">{{errors.type}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Status<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<p class="mt-4">
|
|
<span class="mr-4" v-for="(v,i) in option">
|
|
<a class="icon-text" @click="radioBlocked=v">
|
|
<SvgIcon v-bind="{name: `radio-${radioBlocked.code===v.code? '' : 'un'}checked.svg`, type: 'gray', size: 22}"></SvgIcon>
|
|
<span>{{ v.name }}</span>
|
|
</a>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5">
|
|
<button class="button is-primary has-text-white" @click="update()">Update</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['pagename', 'row'],
|
|
data() {
|
|
return {
|
|
errors: {},
|
|
record: this.row? this.$copy(this.row) : undefined,
|
|
radioBlocked: undefined,
|
|
branch: [],
|
|
check: {},
|
|
branchOpt: undefined,
|
|
option: [{code: 0, name: 'Active'}, {code: 1, name: 'Blocked'}]
|
|
}
|
|
},
|
|
async created() {
|
|
this.record = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
|
|
this.radioBlocked = this.record.blocked? this.option[1] : this.option[0]
|
|
},
|
|
methods: {
|
|
selected(attr, obj) {
|
|
this.record[attr] = obj
|
|
},
|
|
checkError () {
|
|
this.errors = []
|
|
if (!this.$empty(this.record.fullname)) { this.record.fullname = this.record.fullname.trim() }
|
|
if (!this.$empty(this.record.username)) { this.record.username = this.record.username.trim().toLowerCase() }
|
|
if (this.$empty(this.record.fullname)) {
|
|
this.errors.fullname = 'Họ và tên không được bỏ trống'
|
|
} else if (this.record.fullname.length < 5) {
|
|
this.errors.fullname = 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên'
|
|
}
|
|
if (this.$empty(this.record.username)) {
|
|
this.errors.username = 'Tài khoản không được bỏ trống'
|
|
} else if (this.record.username!==this.record.username.replace(' ', '')) {
|
|
this.errors.username = 'Tài khoản không được chứa khoảng trắng'
|
|
} else if(this.record.username.length<5) {
|
|
this.errors.fullname = 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên'
|
|
}
|
|
if(!(this.record._type || this.record.type)) this.errors.type = 'Chưa chọn loại tài khoản'
|
|
return this.errors.length>0? true : false
|
|
},
|
|
async update() {
|
|
if(this.checkError()) return
|
|
if(this.record._type) this.record.type = this.record._type.id
|
|
this.record.blocked = this.radioBlocked.code
|
|
let rs = await this.$updaterow('user', this.record, undefined, this.pagename)
|
|
if(this.radioBlocked.code===1) this.setTokenExpiry()
|
|
},
|
|
doCheck(v) {
|
|
this.$set(this.check, v.code, this.check[v.code]? false : true)
|
|
},
|
|
async setTokenExpiry() {
|
|
let rows = await this.$getdata('token', {user: this.record.id, expiry: 0})
|
|
if(rows.length===0) return
|
|
rows.map(v=>v.expiry = 1)
|
|
this.$insertapi('token', rows, undefined, true)
|
|
}
|
|
}
|
|
}
|
|
</script> |