<template>
<el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="75%" append-to-body>
<el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
<el-row :gutter="20">
<el-col :span="6">
<el-row>
<div class="avatar">
<el-image
:src="dataForm.photo!==''?dataForm.photo:defaultPhoto"
fit="cover"
style="width: 130px; height: 175px"/>
</div>
</el-row>
</el-col>
<el-col :span="18">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名">
<el-input v-model="dataForm.name" disabled type="text"/>
<!--<span>{{ dataForm.name }}</span>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号">
<el-input v-model="dataForm.idCard" disabled type="text"/>
<!--<span>{{ dataForm.idCard }}</span>-->
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" >
<el-form-item label="出生日期" prop="birthday">
<el-input v-model="dataForm.birthday" disabled type="text"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别">
<el-input v-model="dataForm.sex" disabled type="text"/>
<!--<span>{{ dataForm.sex }}</span>-->
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="部门">
<el-input v-model="dataForm.deptName" disabled type="text"/>
<!--<span>{{ dataForm.deptName }}</span>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="人员类别">
<el-input v-model="dataForm.staffTypeName" disabled type="text"/>
<!--<span>{{ dataForm.sex }}</span>-->
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="移动电话">
<el-input v-model="dataForm.phone" disabled type="text"/>
<!--<span>{{ dataForm.phone }}</span>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="办公电话">
<el-input v-model="dataForm.officePhone" disabled type="text"/>
<!--<span>{{ dataForm.phone }}</span>-->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="住址">
<el-input v-model="dataForm.address" disabled type="text"/>
<!--<span>{{ dataForm.address }}</span>-->
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row v-show="isKeyPerson" :gutter="20">
<el-col :span="24">
<el-form-item label="重点区域授权">
<el-checkbox-group v-model="areas">
<el-checkbox v-for="item in keyAreaList" :label="item.value" :key="item.value" :readonly="true" border disabled>{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="isKeyPerson" :gutter="20">
<el-col :span="24">
<el-form-item label="虹膜图片">
<el-image
:src="dataForm.rightIris!==''?dataForm.rightIris:defaultIris"
fit="cover"
style="width: 192px; height: 128px"/>
<el-image
:src="dataForm.leftIris!==''?dataForm.leftIris:defaultIris"
fit="cover"
style="width: 192px; height: 128px"/>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="isKeyPerson" :gutter="20">
<el-col :span="24">
<el-form-item label="虹膜质量">
<span style="display:inline-block; width:192px; text-align: center">{{ dataForm.rightIrisScore }}</span>
<span style="display:inline-block; width:192px; text-align: center">{{ dataForm.leftIrisScore }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</template>
<script>
import { detailStaff } from '@/api/staff'
import { getIrisAreaList } from '@/api/area'
export default {
name: 'StaffDetail',
data() {
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update,detail
dataForm: {
id: '', // id
name: '',
birthday: '',
address: '',
idCard: '',
sex: '',
phone: '',
officePhone: '',
staffTypeName: '',
deptName: '',
deptId: '',
photo: '',
leftIris: '',
rightIris: '',
leftIrisScore: '0',
rightIrisScore: '0'
}, // 表单
textMap: {
create: '新增人员',
update: '编辑人员',
detail: '人员详情'
}, // 表头显示标题
isEditMode: false,
isKeyPerson: false,
areas: [], // 重点区域复选框对应值
keyAreaList: [],
defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
defaultIris: require('@/assets/global_images/iris.png'), // 默认虹膜图片
btnLoading: true // 保存按钮是否不允许点击
}
},
created() {
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
},
methods: {
// 初始化对话框
initDialog: function(dialogStatus, dialogFormVisible, row = null) {
this.btnLoading = false
this.dialogStatus = dialogStatus
this.dialogFormVisible = dialogFormVisible
this.dataForm.controllerLine = ''
if (dialogStatus === 'detail') {
this.isEditMode = false
detailStaff(row.id).then(response => {
if (response.code === 200) {
this.dataForm = {
id: row.id,
name: row.name,
birthday: row.birthday,
address: row.address,
phone: row.phone,
officePhone: response.data.officePhone,
staffTypeName: row.staffTypeName,
idCard: this.encrypIdCardNo(row.idCard),
sex: row.sexStr,
deptName: row.deptName,
photo: row.photo
}
if (response.data.areaIds !== '') {
this.areas = response.data.areaIds.split(',')
this.isKeyPerson = true
if (response.data.irisData !== undefined && response.data.irisData !== '') {
this.dataForm.leftIris = process.env.BASE_API + '/static/' + response.data.irisData.leftImage
this.dataForm.rightIris = process.env.BASE_API + '/static/' + response.data.irisData.rightImage
this.dataForm.leftIrisScore = response.data.irisData.leftIrisScore
this.dataForm.rightIrisScore = response.data.irisData.rightIrisScore
}
} else {
this.isKeyPerson = false
}
}
})
}
},
fetchIrisRegions() {
getIrisAreaList().then(response => {
this.keyAreaList = response.data
})
},
// 身份证号加密显示
encrypIdCardNo(idCard) {
return idCard
// if (idCard.length > 6) {
// return idCard.substr(0, 6) + '********' + idCard.substr(14, 18)
// } else if (idCard) {
// return idCard
// } else {
// return ''
// }
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-select{
width: 100%;
}
.el-date-editor{
width: 100%;
}
.dialog-footer {
margin-top: -20px;
text-align: center;
}
.avatar {
margin: 10px;
display: block;
text-align: center;
}
</style>
