339 lines
14 KiB
Vue
339 lines
14 KiB
Vue
<template>
|
|
<div v-if="record">
|
|
<Caption class="pt-1 pb-4" v-bind="{title: 'From đăng ký cộng tác viên', size: 20, type: 'has-text-black'}"></Caption>
|
|
<div class="has-background-light px-5 pt-4 pb-5">
|
|
<Caption v-bind="{title: 'Thông tin cá nhân'}"></Caption>
|
|
<div class="columns is-multiline mx-0 mt-3">
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Họ tên<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">Điện thoại<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.phone">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.phone">{{ errors.phone }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Ngày sinh<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<b-datepicker
|
|
locale="en-GB"
|
|
v-model="record._dob">
|
|
</b-datepicker>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.dob">{{ errors.dob }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Giới tính<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<SearchBox v-bind="{api:'sex', field:'name', column:['name'], first:true, optionid:record.sex}"
|
|
@option="selected('_sex', $event)"></SearchBox>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.sex">{{ errors.sex }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Tỉnh / thành phố<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<b-autocomplete
|
|
icon-right="magnify"
|
|
v-model="province"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="provinces"
|
|
field="province_name"
|
|
@select="option => changeProvince(option)">
|
|
</b-autocomplete>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.province">{{errors.province}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Quận / huyện<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<b-autocomplete
|
|
icon-right="magnify"
|
|
v-model="district"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="districts"
|
|
field="district_name"
|
|
@select="option => changeDistrict(option)">
|
|
</b-autocomplete>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.province">{{errors.district}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Phường / xã<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<b-autocomplete
|
|
icon-right="magnify"
|
|
v-model="commune"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="communes"
|
|
field="commune_name"
|
|
@select="option => selectCommune = option">
|
|
</b-autocomplete>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.commune">{{errors.commune}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-8">
|
|
<div class="field">
|
|
<label class="label">Địa chỉ<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.address">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.address">{{errors.address}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-12">
|
|
<div class="field">
|
|
<label class="label">Giới thiệu về bạn</label>
|
|
<div class="control">
|
|
<textarea class="textarea" v-model="note" placeholder="Hãy cho chúng tôi biết đôi nét về nghề nghiệp, kinh nghiệm tham gia thị trường, nơi làm việc của bạn. Thông tin này giúp chúng tôi hiểu về bạn từ đó hõ trợ được tốt hơn" rows="2"></textarea>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.address">{{errors.address}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="has-background-light mt-5 px-5 pt-4 pb-5">
|
|
<Caption v-bind="{title: 'Giấy tờ tùy thân'}"></Caption>
|
|
<div class="columns is-multiline mx-0 mt-3">
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Số CMT / CC công dân<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.legal_id">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.legal_id">{{errors.legal_id}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-8">
|
|
<div class="field">
|
|
<label class="label">Nơi cấp<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.issue_place">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.issue_place">{{ errors.issue_place }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-12 pt-0">
|
|
<p class="mb-3 fs-13">Vui lòng tải lên mặt trước và sau của CMT / CCCD (hình ảnh hoặc file scan). Thông tin này dùng để trả thưởng cho bạn</p>
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control is-expanded">
|
|
<b-upload v-model="file">
|
|
<a class="button is-findata is-rounded is-small" :class="loading? 'is-loading' : null">
|
|
<b-icon icon="mdi mdi-plus mr-1"></b-icon>
|
|
<span class="fs-14">Tải lên từ máy tính</span>
|
|
</a>
|
|
</b-upload>
|
|
</div>
|
|
<div class="control" v-for="(v,i) in files">
|
|
<div class="tags has-addons">
|
|
<a class="tag is-link">{{ v }}</a>
|
|
<a class="tag is-delete" @click="remove(i)"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.files">{{ errors.files }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="has-background-light mt-5 px-5 pt-4 pb-5">
|
|
<Caption v-bind="{title: 'Tài khoản ngân hàng'}"></Caption>
|
|
<div class="columns is-multiline mx-0 mt-3">
|
|
<div class="column is-3">
|
|
<div class="field">
|
|
<label class="label">Số tài khoản<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.bank_account">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.bank_account">{{errors.bank_account}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="field">
|
|
<label class="label">Tên tài khoản<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="record.account_name">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.account_name">{{ errors.account_name }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-5">
|
|
<div class="field">
|
|
<label class="label">Ngân hàng<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<SearchBox v-bind="{api:'bank', field:'name', column:['name'], first:true, optionid:record.bank}"
|
|
@option="selected('_bank', $event)"></SearchBox>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.bank">{{ errors.bank }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 pt-2 pb-5">
|
|
<button class="button is-primary" @click="register()">Đăng ký</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
errors: {},
|
|
record: undefined,
|
|
provinces: this.$store.state.provinces || [],
|
|
districts: [],
|
|
communes: [],
|
|
selectProvince: undefined,
|
|
selectDistrict: undefined,
|
|
selectCommune: undefined,
|
|
selectLegal: undefined,
|
|
showmodal: undefined,
|
|
province: undefined,
|
|
district: undefined,
|
|
commune: undefined,
|
|
file: undefined,
|
|
datafile: undefined,
|
|
loading: undefined,
|
|
files: [],
|
|
note: undefined,
|
|
reginfo: undefined
|
|
}
|
|
},
|
|
async created() {
|
|
this.reginfo = await this.$getdata('affiliate', {user: this.login.id}, undefined, true)
|
|
if(this.reginfo) this.note = this.reginfo.note
|
|
this.record = await this.$getdata('user', {id: this.login.id}, undefined, true)
|
|
if(this.record.files) this.files = this.record.files
|
|
if(this.record.dob) this.$set(this.record, '_dob', new Date(this.record.dob))
|
|
if(!this.$store.state.provinces) {
|
|
this.provinces = await this.$getdata('province')
|
|
this.$store.commit('updateStore', {name: 'provinces', data: this.provinces})
|
|
}
|
|
if(this.record.location__province_code) {
|
|
this.selectProvince = this.$find(this.provinces, {province_code: this.record.location__province_code})
|
|
this.province = this.selectProvince.province_name
|
|
await this.getDistrict()
|
|
this.selectDistrict = this.$find(this.districts, {district_code: this.record.location__district_code})
|
|
this.district = this.selectDistrict.district_name
|
|
await this.getCommune()
|
|
this.selectCommune = this.$find(this.communes, {commune_code: this.record.location__commune_code})
|
|
this.commune = this.selectCommune.commune_name
|
|
}
|
|
},
|
|
computed: {
|
|
login: {
|
|
get: function() {return this.$store.state.login},
|
|
set: function(val) {this.$store.commit('updateLogin', {login: val})}
|
|
}
|
|
},
|
|
watch: {
|
|
file: function(newVal) {
|
|
if(!newVal) return
|
|
var file = this.$upload(newVal, 'file', this.login.id)
|
|
if(file.error) {
|
|
let info = {duration: 4000, type: 'is-danger', hasIcon: false, message: file.text}
|
|
this.$buefy.notification.open(info)
|
|
return
|
|
}
|
|
this.datafile = file
|
|
this.uploadImage(file)
|
|
}
|
|
},
|
|
methods: {
|
|
async uploadImage(file) {
|
|
this.loading = true
|
|
let rs = await this.$insertapi('upload', file.form)
|
|
this.loading = false
|
|
if(rs!=='error') this.files.push(rs.rows[0].file)
|
|
},
|
|
checkError() {
|
|
this.errors = {}
|
|
if(this.$empty(this.record.fullname)) this.errors.fullname = 'Họ tên không được bỏ trống'
|
|
if(this.$empty(this.record.phone)) this.errors.phone = 'Điện thoại không được bỏ trống'
|
|
if(this.$empty(this.record._sex)) this.errors.sex = 'Chưa chọn giới tính'
|
|
if(this.$empty(this.selectProvince)) this.errors.province = 'Chưa chọn Tỉnh / Thành phố'
|
|
if(this.$empty(this.selectDistrict)) this.errors.district = 'Chưa chọn Quận / Huyện'
|
|
if(this.$empty(this.selectCommune)) this.errors.commune = 'Chưa chọn Quận / Huyện'
|
|
if(this.$empty(this.record._dob)) this.errors.dob = 'Chưa nhập ngày sinh'
|
|
if(this.$empty(this.record.address)) this.errors.address = 'Địa chỉ không được bỏ trống'
|
|
if(this.$empty(this.record.legal_id)) this.errors.legal_id = 'Số CMT / CC công dân không được bỏ trống'
|
|
if(this.$empty(this.record.issue_place)) this.errors.issue_place = 'Nơi cấp không được bỏ trống'
|
|
if(this.files.length===0) this.errors.files = 'Bạn chưa tải lên chứng minh thư / căn cước công dân'
|
|
if(this.$empty(this.record.bank_account)) this.errors.bank_account = 'Số tài khoản không được bỏ trống'
|
|
if(this.$empty(this.record.account_name)) this.errors.account_name = 'Tên tài khoản không được bỏ trống'
|
|
if(this.$empty(this.record._bank)) this.errors.bank = 'Chưa chọn ngân hàng'
|
|
return Object.keys(this.errors).length>0
|
|
},
|
|
async register() {
|
|
if(this.checkError()) return
|
|
if(this.record._dob) this.record.dob = this.$dayjs(this.record._dob).format('YYYY-MM-DD')
|
|
if(this.record._sex) this.record.sex = this.record._sex.id
|
|
this.record.files = this.files
|
|
if(this.selectCommune) {
|
|
let found = await this.$getdata('location', {province_code: this.selectProvince.code, district_code: this.selectDistrict.district_code, commune_code: this.selectCommune.commune_code}, undefined, true)
|
|
if(found) this.record.location = found.id
|
|
}
|
|
let rs = await this.$updateapi('user', this.record)
|
|
let obj = {user: this.login.id, note: this.note, status: 1, bank_account: this.record.bank_account, account_name: this.record.account_name, bank: this.record._bank.id}
|
|
let found = this.$findapi('affiliate')
|
|
let rs1 = await this.$insertapi('affiliate', obj, found.params.values)
|
|
this.$emit('affiliate', rs1)
|
|
},
|
|
changeProvince(option) {
|
|
this.selectProvince = option
|
|
this.getDistrict()
|
|
this.selectDistrict = undefined
|
|
this.district = undefined
|
|
this.communes = []
|
|
this.selectCommune = undefined
|
|
this.commune = undefined
|
|
},
|
|
changeDistrict(option) {
|
|
this.selectDistrict = option
|
|
this.getCommune()
|
|
},
|
|
selected(attr, obj) {
|
|
this.record[attr] = obj
|
|
},
|
|
async getDistrict() {
|
|
if(!this.selectProvince) return
|
|
this.districts = await this.$getdata('district', {province_code: this.selectProvince.province_code})
|
|
},
|
|
async getCommune() {
|
|
if(!this.selectProvince) return
|
|
this.communes = await this.$getdata('commune', {province_code: this.selectProvince.province_code, district_code: this.selectDistrict.district_code})
|
|
},
|
|
openImage() {
|
|
this.showmodal = {component: 'common/Imagebox', title: 'Hình ảnh', width: '90%'}
|
|
},
|
|
remove(i) {
|
|
this.$delete(this.files, i)
|
|
}
|
|
}
|
|
}
|
|
</script> |