<template>
<div class="app-container">
<el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="personForm" :size="formSize" class="main-form" label-width="120px">
<el-row>
<el-col :span="16">
<el-row :gutter="20">
<el-col v-if="personType=='1'" :span="11">
<el-form-item label="员工编号" prop="personCode">
<el-input v-model="personForm.personCode" type="text" placeholder="员工编号，不填系统将自动生成"/>
</el-form-item>
</el-col>
<el-col v-if="personType=='0'" :span="11">
<el-form-item label="访客编号">
<el-input v-model.trim="personForm.personCode" disabled type="text" placeholder="系统将自动生成"/>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="姓名" prop="name">
<el-input v-model.trim="personForm.name" :disabled="isEditMode" show-word-limit maxlength="10" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11">
<el-form-item label="卡编号" prop="cardCode">
<el-input v-model.trim="personForm.cardCode" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="卡类型" prop="cardType">
<el-select v-model="personForm.cardType" :disabled="personForm.personType === '0'" placeholder="必填">
<el-option label="A" value="A"/>
<el-option label="B" value="B"/>
<el-option label="C" value="C"/>
<el-option label="D" value="D"/>
<!--<el-option label="访客" value="访客"/>-->
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11">
<el-form-item :label="personType=='1'?'部门':'到访单位'" prop="deptid">
<dept-select v-model="personForm.deptid" :need-top="false" :dept-show="true" placeholder="单位/部门"/>
</el-form-item>
</el-col>
<el-col v-if="personType=='1'" :span="11" >
<el-form-item label="职务" prop="duty">
<el-select v-model="personForm.duty" placeholder="职务" clearable>
<el-option v-for="item in dutyList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11" >
<el-form-item label="身份证号" prop="idCardNo">
<el-input v-model.trim="encrypIdCardNo" :disabled="isEditMode" type="text" placeholder="身份证号"/>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="出生日期" prop="birthday">
<el-date-picker
v-model="personForm.birthday"
:editable="false"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="选择出生日期"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11">
<el-form-item label="性别" prop="sex">
<el-select v-model="personForm.sex" placeholder="性别" clearable>
<el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="民族" prop="nation">
<el-select v-model="personForm.nation" placeholder="民族" clearable>
<el-option v-for="item in nationList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div v-if="attendanceEnable">
<el-row :gutter="20">
<el-col :span="11">
<el-form-item label="考勤" prop="ext.isKaoqin">
<el-select v-model="personForm.ext.isKaoqin" placeholder="是否考勤" clearable>
<el-option key="1" label="是" value="1"/>
<el-option key="0" label="否" value="0"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item v-if="personForm.ext.isKaoqin==='1'" label="统计加班" prop="ext.isOt">
<el-select v-model="personForm.ext.isOt" placeholder="是否统计加班" clearable>
<el-option key="1" label="是" value="1"/>
<el-option key="0" label="否" value="0"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="personForm.ext.isKaoqin==='1'" :gutter="20">
<el-col :span="11">
<el-form-item label="专务" prop="ext.isZhuanwu">
<el-select v-model="personForm.ext.isZhuanwu" placeholder="是否专务" clearable>
<el-option key="1" label="是" value="1"/>
<el-option key="0" label="否" value="0"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="正职领导" prop="ext.isLeader">
<el-select v-model="personForm.ext.isLeader" placeholder="是否正职领导" clearable>
<el-option key="1" label="是" value="1"/>
<el-option key="0" label="否" value="0"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="personForm.ext.isKaoqin==='1'" :gutter="20">
<el-col :span="11" >
<el-form-item label="年假/天" prop="ext.initAnnualLeave">
<el-input v-model.trim="personForm.ext.initAnnualLeave" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="剩余年假/天" prop="ext.annualLeave">
<el-input v-model.trim="personForm.ext.annualLeave" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
</el-row>
</div>
<el-row :gutter="20">
<el-col :span="22">
<el-form-item label="颁证单位" prop="certification">
<el-input v-model.trim="personForm.ext.certificationUnit" type="text" placeholder="非必填"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="22">
<el-form-item label="住址" prop="address">
<el-input v-model.trim="personForm.ext.address" type="text" placeholder="非必填"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="22">
<el-form-item label="备注" prop="remarks">
<el-input v-model.trim="personForm.remarks" type="text" placeholder="非必填"/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6" :offset="2">
<el-row>
<div class="avatar">
<el-image
:src="photo!==''?photo:defaultPhoto"
fit="cover"
style="width: 130px; height: 175px"/>
</div>
</el-row>
<el-row>
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:http-request="uploadFile"
:show-file-list="false"
class="avatar-uploader"
action="string"
accept=".jpg,.jpeg,.png">
<el-button type="primary">点击上传照片</el-button>
</el-upload>
</el-row>
<el-row>
<el-button type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
</el-row>
</el-col>
</el-row>
</el-form>
<div style="height: 120px;">
<el-row type="flex" justify="center">
<el-col :span="15" style="text-align:center">
<el-button v-show="!isEditMode" size="medium" @click="resetForm"> 重置 </el-button>
<el-button :disabled="!canSave" type="primary" size="medium" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
<el-button v-show="!isEditMode" type="primary" size="medium" style="margin-left: 20px;" @click="registerIris"> 下一步，注册虹膜 </el-button>
</el-col>
</el-row>
</div>
<div>
<iframe :src="idsrc" name = "iframeIDCard" scrolling="no" width="100%" height="0" frameBorder="no"/>
</div>
</div>
</template>
<script>
import DeptSelect from '@/components/DeptSelect'
// import { Uploadimg } from '@/api/common'
import { addPerson, updatePerson, personInfo, getSexType, getDutyType, getNationType, getPersonPhoto } from '@/api/person'
import { getToken } from '@/utils/auth' // getToken from cookie
import { getProject } from '@/utils/baseConfig'
// import { getBirthdayByIdNO, getSexByIdNO } from '@/utils/dataAnalysis'
import { isIE } from '@/utils/browser'
import { attendanceEnable } from '@/main.js'
export default {
name: 'AddPerson',
components: { DeptSelect },
data() {
// 校验数字
const validateNumber = (rule, value, callback) => {
let validateLSBol = (/^LS[0-9|A-Z|a-z]*$/).test(value) // LS 开头数字和字母组成
let validateNumBol = (/^([0-9]+)$/).test(value) // 数字
let lenNumBol = validateNumBol && value.length !== 8 && value.length !== 9
let lenLSBol = validateLSBol && value.length > 10
let lenMsg = lenNumBol ? '员工编码位数应该为8位或者9位' : lenLSBol ? '员工编码位数不超过10位' : ''
if (!validateNumBol && !validateLSBol) {
callback(new Error('请输入合法字符且不能为空'))
} else if (lenNumBol || lenLSBol) {
callback(new Error(`${lenMsg}`))
} else {
callback()
}
}
const validateIDCard = (rule, value, callback) => {
if (value !== '') {
if ((/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value) === false) {
callback(new Error('请输入合法的身份证号'))
} else {
callback()
}
} else {
callback(new Error('身份证号不能为空'))
}
}
// 校验年假
const validateInitAnnualLeave = (rule, value, callback) => {
if (value !== '') {
if (value !== '0') {
if (!Number(value)) {
callback(new Error('请输入0-20之间的数字'))
} else {
var min = this.personForm.ext.annualLeave !== '' ? this.personForm.ext.annualLeave : 0
if (parseFloat(value) < parseFloat(min) || parseFloat(value) > 20) {
callback(new Error('请输入0-20之间且不小于剩余年假天数的值'))
} else {
if (value.indexOf('.') !== -1) {
if (value.split('.')[1].length > 1) {
callback(new Error('最多一位小数'))
} else {
if (value.split('.')[1] !== '0' && value.split('.')[1] !== '5') {
callback(new Error('只能是整数或整数加减0.5的值'))
} else {
callback()
}
}
} else {
callback()
}
}
}
} else {
callback()
}
} else {
callback(new Error('年假不能为空'))
}
}
// 校验剩余年假
const validateAnnualLeave = (rule, value, callback) => {
if (value !== '') {
if (value !== '0') {
if (!Number(value)) {
callback(new Error('请输入数字'))
} else {
var max = this.personForm.ext.initAnnualLeave !== '' ? this.personForm.ext.initAnnualLeave : 20
if (parseFloat(value) < 0 || parseFloat(value) > parseFloat(max)) {
callback(new Error('请输入0-20之间且不大于年假天数的值'))
} else {
if (value.indexOf('.') !== -1) {
if (value.split('.')[1].length > 1) {
callback(new Error('最多一位小数'))
} else {
if (value.split('.')[1] !== '0' && value.split('.')[1] !== '5') {
callback(new Error('只能是整数或整数加减0.5的值'))
} else {
callback()
}
}
} else {
callback()
}
}
}
} else {
callback()
}
} else {
callback(new Error('剩余年假不能为空'))
}
}
return {
formSize: 'large', // 如果启动了考勤功能，条目太多，size设置为small，否则为large
attendanceEnable: attendanceEnable,
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update
isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
personType: '', // 人员角色，1为员工，0为访客
canSave: true, // 是否可以点击保存，当点击后该值置为false，直到后台返回结果再置为true
isSave: false, // 当点击保存按钮后，并返回200结果，置为true，表示已经保存
personForm: {
id: '', // 人员id
idCardNo: '', // 身份证号
cardCode: '', // 卡编号
cardType: '', // 卡类型
name: '', // 姓名
deptid: '', // 单位/部门
remarks: '', // 备注
duty: '', // 职务
sex: '', // 性别
personType: '1', // 人员类型
birthday: '', // 出生日期
nation: '', // 民族
photo: '',
ext: {
cardCode: '', // 卡编号
cardType: '', // 卡类型
certificationUnit: '', // 颁发证件单位，
address: '', // 住址
isKaoqin: '',
isOt: '',
isZhuanwu: '',
isLeader: '',
initAnnualLeave: '',
annualLeave: ''
}
}, // 表单
photo: '', // 图片路径
defaultPhoto: require('../../assets/global_images/photo.png'), // 默认图片路径
fileList: [],
imageList: [],
sexList: [], // 性别列表
dutyList: [], // 职务列表
nationList: [], // 民族列表
rules: {
personCode: [{ required: true, validator: validateNumber, trigger: ['blur', 'change'] }],
name: [{ required: true, message: '姓名必填', trigger: ['blur', 'change'] }],
cardCode: [{ required: true, message: '卡编号必填', trigger: ['blur', 'change'] }],
cardType: [{ required: true, message: '卡类型必选', trigger: ['blur', 'change'] }],
// idCardNo: [{ required: true, validator: validateIDCard, trigger: ['blur', 'change'] }],
deptid: [{ required: true, message: '单位/部门必选', trigger: 'change' }],
// duty: [{ required: true, message: '职务必选', trigger: 'change' }],
// sex: [{ required: true, message: '性别必选', trigger: 'blur' }],
// birthday: [{ required: true, message: '出生日期必填', trigger: ['blur'] }],
'ext.isKaoqin': [{ required: true, message: '是否考勤必选', trigger: ['change'] }],
'ext.isOt': [{ required: true, message: '是否统计加班必选', trigger: ['change'] }],
'ext.isZhuanwu': [{ required: true, message: '是否专务必选', trigger: ['change'] }],
'ext.isLeader': [{ required: true, message: '是否正职领导必选', trigger: ['change'] }],
'ext.initAnnualLeave': [{ validator: validateInitAnnualLeave, required: true, trigger: ['blur'] }],
'ext.annualLeave': [{ validator: validateAnnualLeave, required: true, trigger: ['blur'] }]
},
dialogVisible: false,
labelPosition: 'right',
responseAssignShow: false,
deptShowTop: false, // 权属单位下拉是否显示顶级
deptShow: true,
formLoading: false,
idsrc: 'static/IDCard/IDCardReader.htm'
}
},
computed: {
encrypIdCardNo() {
if (this.personForm.idCardNo) {
return this.personForm.idCardNo.substr(0, 6) + '********' + this.personForm.idCardNo.substr(14, 18)
} else {
return ''
}
}
},
watch: {
// 'personForm.idCardNo': function(val) {
// this.personForm.birthday = getBirthdayByIdNO(val)
// this.personForm.sex = getSexByIdNO(val)
// }
},
mounted() {
if (attendanceEnable === true) {
this.formSize = 'small'
}
this.fetchSexType()// 获取性别列表
this.fetchDutyType() // 获取职务列表
this.fetchNationType() // 获取民族列表
if (this.$route.query.personType) {
this.personType = this.$route.query.personType
this.personForm.personType = this.$route.query.personType
if (this.personType === '0') {
this.personForm.cardType = '访客'
}
}
if (this.$route.query && this.$route.query.type) {
const type = this.$route.query.type
this.isSave = false // isSave置为false,表示没有点击过保存按钮
if (type === 'create') {
this.isEditMode = false // 不是编辑页面
} else if (type === 'update') {
this.isEditMode = true // 是编辑页面
this.fetchData(this.$route.query.id)
}
}
},
activated() {
if (this.$route.query && this.$route.query.type) {
this.isSave = false // isSave置为false,表示没有点击过保存按钮
const type = this.$route.query.type
if (type === 'create') {
this.isEditMode = false
this.canSave = true
} else if (type === 'update') {
this.isEditMode = true
this.canSave = true
this.fetchData(this.$route.query.id)
}
}
if (this.$route.query.personType) {
this.personType = this.$route.query.personType
this.personForm.personType = this.$route.query.personType
if (this.personType === '0') {
this.personForm.cardType = '访客'
}
}
},
methods: {
// 取消
cancel() {
this.dialogFormVisible = false
this.fileList = []
// 清除验证
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
fetchData(id) {
this.formLoading = true
// const base_url = process.env.BASE_API + '/static/'
personInfo(id).then(response => {
const personForm = response.data
this.personForm = {
id: personForm.id, // 人员id
personCode: personForm.personCode, // 人员编号
idCardNo: personForm.idCardNo, // 身份证号
cardCode: personForm.ext.cardCode, // 卡编号
cardType: personForm.ext.cardType, // 卡类型
name: personForm.name, // 姓名
deptid: personForm.deptid, // 单位/部门
remarks: personForm.remarks, // 备注
duty: personForm.duty, // 职务
sex: personForm.sex, // 性别
personType: personForm.personType, // 人员类型
birthday: personForm.birthday, // 出生日期
nation: personForm.nation, // 民族
photo: personForm.photo,
ext: {
cardCode: personForm.ext.cardCode, // 卡编号
cardType: personForm.ext.cardType, // 卡类型
certificationUnit: personForm.ext.certificationUnit, // 颁发证件单位，
address: personForm.ext.address, // 住址
isKaoqin: personForm.ext.isKaoqin,
isOt: personForm.ext.isOt,
isZhuanwu: personForm.ext.isZhuanwu,
isLeader: personForm.ext.isLeader,
initAnnualLeave: personForm.ext.initAnnualLeave,
annualLeave: personForm.ext.annualLeave
}
}
getPersonPhoto(id).then(res => {
if (res.data) {
this.photo = res.data
}
})
this.formLoading = false
})
},
readIDCard() {
var _this = this
this.ws = _this.$root.ws
if (this.ws === null) {
this.ws = new WebSocket(_this.$root.wsURL)
// 注册各类回调
this.ws.onopen = function() {
_this.ws.send('ReadIdCard')
}
this.ws.onclose = function() {
_this.$message.info('与ICS连接断开')
_this.$root.ws = null
}
this.ws.onerror = function() {
_this.$message.error('与ICS通信发生错误')
}
_this.$root.ws = this.ws
} else {
this.ws.send('ReadIdCard')
}
this.ws.onmessage = function(receiveMsg) {
var data = JSON.parse(receiveMsg.data)
if (data !== '') {
_this.personForm.idCardNo = data.IdCardNo
_this.personForm.name = data.Name
// if (window.frames['iframeIDCard'].Sex === '2') { this.personForm.sex = '女' } else { this.personForm.sex = '男' }
_this.personForm.sex = parseInt(data.Sex)
var birth = data.Birthday
_this.personForm.birthday = birth.substring(0, 3) + '-' + birth.substring(4, 5) + '-' + birth.substring(6, 7)
_this.photo = data.Photo
_this.personForm.nation = data.Nation
var nationName = data.Nation
for (var item of _this.nationList) {
if (item.name === nationName) {
_this.personForm.nation = item.value
break
}
}
_this.personForm.ext.certificationUnit = data.Authority
_this.personForm.ext.address = data.Address
} else {
_this.$message.warning('读卡失败')
}
}
},
// readIDCard() {
// window.frames['iframeIDCard'].ReadCard()
// if (window.frames['iframeIDCard'].result) {
// this.personForm.idCardNo = window.frames['iframeIDCard'].CardNo
// this.personForm.name = window.frames['iframeIDCard'].Name
// // if (window.frames['iframeIDCard'].Sex === '2') { this.personForm.sex = '女' } else { this.personForm.sex = '男' }
// this.personForm.sex = parseInt(window.frames['iframeIDCard'].Sex)
// this.personForm.birthday = window.frames['iframeIDCard'].Born.substring(0, 4) + '-' + window.frames['iframeIDCard'].Born.substring(4, 6) + '-' + window.frames['iframeIDCard'].Born.substring(6, 8)
// this.photo = 'data:image/png;base64,' + window.frames['iframeIDCard'].Picture
// this.personForm.nation = window.frames['iframeIDCard'].Nation + '族'
// var nationName = window.frames['iframeIDCard'].Nation + '族'
// for (var item of this.nationList) {
// if (item.name === nationName) {
// this.personForm.nation = item.value
// break
// }
// }
// this.personForm.ext.certificationUnit = window.frames['iframeIDCard'].IssuedAt
// this.personForm.ext.address = window.frames['iframeIDCard'].Address
// } else {
// this.$message.warning('读卡失败')
// }
// // const baseUrl = getProject().register_url
// // // const url = 'openIE:' + baseUrl + '?token=' + token + '_id=' + id + '_idCardNo=' + idCardNo
// // window.location.href = url
// },
// 重置表单
resetForm() {
this.personForm = {
idCardNo: '', // 身份证号
name: '', // 姓名
cardCode: '', // 卡编号
cardType: '', // 卡类型
deptid: '', // 单位/部门
remarks: '', // 备注
duty: '', // 职务
sex: '', // 性别
personType: '1', // 人员类型
birthday: '', // 出生日期
nation: '', // 民族
photo: '',
ext: {
cardCode: '', // 卡编号
cardType: '', // 卡类型
certificationUnit: '', // 颁发证件单位，
address: '', // 住址
isKaoqin: '',
isOt: '',
isZhuanwu: '',
isLeader: '',
initAnnualLeave: '',
annualLeave: ''
}
}
this.photo = ''
// 清除验证
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
// 保存数据
saveData: function() {
// 照片不为空则对照片进行处理
if (this.photo !== '') {
if (this.photo.startsWith('http')) { // 上传的普通图片,去掉static头
let index = this.photo.indexOf('/static/')
if (index !== -1) {
index += 8
}
this.personForm.photo = this.photo.substring(index)
} else if (this.photo.startsWith('data:image')) { // 读卡器读的base64图片，直接传编码
console.log()
this.personForm.photo = this.photo
}
}
this.$refs['dataForm'].validate((valid) => {
this.personForm.ext.cardType = this.personForm.cardType
this.personForm.ext.cardCode = this.personForm.cardCode
if (valid) {
this.canSave = false
// 如果新增页面未保存，则调用add
// 如果是新增页面已经保存，则调用update
// 其他情况均为修改页面
if (this.isSave === false && this.isEditMode === false) {
addPerson(this.personForm).then(response => {
if (response.code === 200) {
// 保存用户id
this.personForm.id = response.data.id
this.personForm.personCode = response.data.code
this.isSave = true
this.$message.success('保存成功!')
}
this.canSave = true
}).catch(() => {
this.canSave = true
})
} else if (this.isSave === true && this.isEditMode === false) {
updatePerson(this.personForm).then(response => {
if (response.code === 200) {
this.$message.success('保存成功!')
}
this.canSave = true
}).catch(() => {
this.canSave = true
})
} else {
updatePerson(this.personForm).then(response => {
debugger
if (response.code === 200) {
this.$message.success('保存成功!')
}
this.canSave = true
}).catch(() => {
this.canSave = true
})
}
}
})
},
// 注册虹膜
registerIris() {
// 如果已经保存
if (this.isSave) {
const token = getToken()
const id = this.personForm.id
const idCardNo = this.personForm.idCardNo
const baseUrl = getProject().register_url
if (isIE()) {
const url = baseUrl + '?token=' + token + '_id=' + id + '_idCardNo=' + idCardNo
window.open(url, '_blank')
} else {
const url = 'openIE:' + baseUrl + '?token=' + token + '_id=' + id + '_idCardNo=' + idCardNo
window.location.href = url
}
} else {
this.$message.warning('请先保存用户基本信息')
}
},
// 图片上传
uploadFile(file) {
console.log('uploadFile:' + file.file.name)
// const base_url = process.env.BASE_API + '/static/'
// Uploadimg(file).then(res => {
// if (res.code === 200) {
// this.photo = base_url + res.data
// } else {
// this.$message.warning(res.message)
// }
// })
// 转base64
this.getBase64(file.file).then(resBase64 => {
this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
console.log(this.photo)
})
},
// 上传前判断文件格式及大小
handleBeforeUpload(file) {
const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
let res = true
console.log(file.size)
const isLt2M = file.size / 1024 < 200
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
res = false
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 200KB!')
res = false
}
return res
},
// 上传成功后回显
handleSuccess(response, file) {
console.log('handleSuccess')
const base_url = process.env.BASE_API + '/static/'
if (response.code === 200) {
this.photo = base_url + response.data
} else {
this.$message.warning(response.message)
}
},
// 获取性别
fetchSexType() {
getSexType().then(response => {
this.sexList = response.data
})
},
// 获取职务
fetchDutyType() {
getDutyType().then(response => {
this.dutyList = response.data
})
},
// 获取民族
fetchNationType() {
getNationType().then(response => {
this.nationList = response.data
})
},
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
let fileResult = ''
reader.readAsDataURL(file)
// 开始转
reader.onload = function() {
fileResult = reader.result
}
// 转 失败
reader.onerror = function(error) {
reject(error)
}
// 转 结束 咱就 resolve 出去
reader.onloadend = function() {
resolve(fileResult)
}
})
},
encrypIdCard(idCardNo) {
if (idCardNo) {
return idCardNo.substr(0, 6) + '********' + idCardNo.substr(14, 18)
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.hide .el-upload--picture-card {
display: none;
}
.main-form{
margin: 0px 30px;
margin-top: 20px;
padding: 10px;
overflow: auto;
}
.el-dialog{
width:700px
}
.el-select{
width: 100%;
}
.line{
width: 50px;
margin-left: 5px;
}
.hide .el-upload-–picture-card{
display: none;
}
.imgBox{
width: 100%;
text-align: center;
}
.avatar-uploader .el-upload {
margin-left: 12px;
margin-top: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 238px;
line-height: 238px;
text-align: center;
}
.avatar {
margin: 10px;
display: block;
}
.id-card-btn{
width:126px;
margin-left: 12px;
margin-top: 20px;
}
</style>
