|
|
|
|
@ -50,22 +50,20 @@
|
|
|
|
|
<div class="colRightBbox">
|
|
|
|
|
<div class="titleLogo">证件照信息</div>
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<!--<img-preview :imgObj="modifyPhotoObj"-->
|
|
|
|
|
<!--style="display:inline-block;width: 100%;height: 100%;"/>-->
|
|
|
|
|
<img ref="modifyPhoto" alt=""
|
|
|
|
|
:src="idPhotoUrl"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
</div>
|
|
|
|
|
<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp"
|
|
|
|
|
list-type="picture" class="Uploader"
|
|
|
|
|
@change="savePersonIDPhoto">修改证件照
|
|
|
|
|
</a-upload>
|
|
|
|
|
<!--<Uploader :type="2" :canUpload="true" :option="{}" :multiple="false" title="修改证件照"-->
|
|
|
|
|
<!--@uploadComplete="uploadComplete" class="Uploader" :fileData="fileList"-->
|
|
|
|
|
<!--></Uploader>-->
|
|
|
|
|
<a-button class="fixBtnChange" type="primary" @click="onShowCropper">修改证件照</a-button>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto">保存证件照</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<modal-panel addChildType="slot" modalTitle="上传证件照" :show="show" modalWidth="60%" class="person-id-photo-container"
|
|
|
|
|
:destroyOnClose="destroyOnClose" @callback="onCallback">
|
|
|
|
|
<img-cropper selectBtnName="选择证件照" :option="option" ref="cropper" :cropperName="photoTitle" :can-upload="false"/>
|
|
|
|
|
</modal-panel>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -75,14 +73,30 @@
|
|
|
|
|
import ImgPreview from '../../../common/imgPreview.vue';
|
|
|
|
|
import GUID_UUID from '../../../../../global-llibs/guid-uuid'
|
|
|
|
|
import BaseConfig from '../../../../../global-llibs/base-config'
|
|
|
|
|
import Uploader from '../../../../../components/common/uploader/Upload.vue'
|
|
|
|
|
import StaticParams from '../../../../../global-llibs/staticParams';
|
|
|
|
|
|
|
|
|
|
import IDPhoto from '../../../../teacherInfo/fieldComponent/IDPhoto.vue'
|
|
|
|
|
import ModalPanel from '../../../../../components/common/modal/ModalPanel';
|
|
|
|
|
import ImgCropper from '../../../../../components/common/imgCropper/ImgCropper';
|
|
|
|
|
export default {
|
|
|
|
|
name: "PersonMsgModal",
|
|
|
|
|
props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
destroyOnClose: false,
|
|
|
|
|
show:false,
|
|
|
|
|
photoTitle:"",
|
|
|
|
|
option: {
|
|
|
|
|
img: "",
|
|
|
|
|
outputType: 'png',
|
|
|
|
|
autoCrop: true,
|
|
|
|
|
autoCropWidth: 99,
|
|
|
|
|
autoCropHeight: 139,
|
|
|
|
|
full: false,
|
|
|
|
|
fixedBox: true,
|
|
|
|
|
original: true,
|
|
|
|
|
centerBox: true,
|
|
|
|
|
maxImgSize: 500,
|
|
|
|
|
},
|
|
|
|
|
bodyStyle: {
|
|
|
|
|
background: '#01366B !important',
|
|
|
|
|
},
|
|
|
|
|
@ -97,6 +111,8 @@
|
|
|
|
|
imgSrc: '',
|
|
|
|
|
modifyPhotoObj: {},
|
|
|
|
|
idPhotoJson: {},
|
|
|
|
|
idPhotoUrl:'',
|
|
|
|
|
fileSize:""
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
@ -114,8 +130,10 @@
|
|
|
|
|
AIcon: Icon,
|
|
|
|
|
AUpload: Upload,
|
|
|
|
|
// AMessage: message,
|
|
|
|
|
Uploader,
|
|
|
|
|
ImgPreview,
|
|
|
|
|
IDPhoto,
|
|
|
|
|
ModalPanel,
|
|
|
|
|
ImgCropper
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.uploadComplete()
|
|
|
|
|
@ -124,6 +142,31 @@
|
|
|
|
|
this.getPersonTx()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onShowCropper: function () {
|
|
|
|
|
this.show = true;
|
|
|
|
|
},
|
|
|
|
|
onCallback: function ([type]) {
|
|
|
|
|
if (type === 'ok'){
|
|
|
|
|
this.destroyOnClose = false;
|
|
|
|
|
// if (this.$refs.cropper.file){
|
|
|
|
|
// this.spinning = true;
|
|
|
|
|
// }
|
|
|
|
|
this.$refs.cropper.getFile((file)=>{
|
|
|
|
|
// this.data.props.imgFile = file
|
|
|
|
|
if(this.$refs.cropper.file){
|
|
|
|
|
StaticParams.uploadFile(file,(data)=>{
|
|
|
|
|
if (data.success === true){
|
|
|
|
|
this.idPhotoUrl = this.BaseConfig.url_path_down + data.data.data.url;
|
|
|
|
|
this.fileSize = data.data.data.file_size;
|
|
|
|
|
}
|
|
|
|
|
},false)//不插入资源库
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}else{
|
|
|
|
|
this.destroyOnClose = true;
|
|
|
|
|
}
|
|
|
|
|
this.show = false;
|
|
|
|
|
},
|
|
|
|
|
cancelModal() {
|
|
|
|
|
this.$emit('cancelModal')
|
|
|
|
|
},
|
|
|
|
|
@ -172,22 +215,31 @@
|
|
|
|
|
method: InterConfig.getModifyPhoto.method,
|
|
|
|
|
isTestLogin: InterConfig.getModifyPhoto.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
if (result[0].data.code === 2000 && result[0].data.id_photo_json !== "") {
|
|
|
|
|
this.modifyPhotoObj = JSON.parse(result[0].data.id_photo_json)
|
|
|
|
|
let res = result[0].data;
|
|
|
|
|
if (res.code === 2000) {
|
|
|
|
|
let file = res.data.id_photo_json;
|
|
|
|
|
console.log("file",file)
|
|
|
|
|
console.log("JSON.parse(file)",JSON.parse(file))
|
|
|
|
|
if(file && file !== ""){
|
|
|
|
|
this.idPhotoUrl = JSON.parse(file).url;
|
|
|
|
|
this.fileSize = JSON.parse(file).file_size;
|
|
|
|
|
this.option.img = this.idPhotoUrl;
|
|
|
|
|
}
|
|
|
|
|
console.log("idPhotoUrl:",this.idPhotoUrl)
|
|
|
|
|
console.log("fileSize:",this.fileSize)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//修改证件照
|
|
|
|
|
savePersonIDPhoto(val) {
|
|
|
|
|
// let targetUrl = val.file//List[val.fileList.length - 1]
|
|
|
|
|
// this.$refs.modifyPhoto.src = targetUrl.thumbUrl
|
|
|
|
|
console.log('val', val)
|
|
|
|
|
// if (val.file.percent === 100 && val.event) {
|
|
|
|
|
//保存证件照
|
|
|
|
|
saveIdPhoto:function () {
|
|
|
|
|
let param = {
|
|
|
|
|
person_id: this.BaseConfig.userInfo.person_id,//登录人ID
|
|
|
|
|
identity_id: this.BaseConfig.userInfo.identity_id,//"登录人身份ID
|
|
|
|
|
org_id: this.BaseConfig.person_info_my.bureau_id, //登录人机构ID
|
|
|
|
|
id_photo_json: val.file,
|
|
|
|
|
id_photo_json: JSON.stringify({
|
|
|
|
|
file_size:this.fileSize,
|
|
|
|
|
url:this.idPhotoUrl
|
|
|
|
|
}),
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: InterConfig.savePersonIDPhoto.url,
|
|
|
|
|
@ -195,22 +247,12 @@
|
|
|
|
|
method: InterConfig.savePersonIDPhoto.method,
|
|
|
|
|
isTestLogin: InterConfig.savePersonIDPhoto.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
console.log('修改证件照', param)
|
|
|
|
|
// if (result[0].data.code === 2000 && val.file.percent === 100 && !val.event) {
|
|
|
|
|
if (result[0].data.code === 2000) {
|
|
|
|
|
message.success('修改成功')
|
|
|
|
|
} else if (result[0].data.code !== 2000) {
|
|
|
|
|
} else {
|
|
|
|
|
message.error('修改失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// }
|
|
|
|
|
// let param = {
|
|
|
|
|
// name: this.name,
|
|
|
|
|
// key: this.key,
|
|
|
|
|
// chunk: 0,
|
|
|
|
|
// chunks: 1,
|
|
|
|
|
// file: this.file,
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
//获取头像信息
|
|
|
|
|
getPersonTx() {
|
|
|
|
|
@ -266,6 +308,28 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss" type="text/scss">
|
|
|
|
|
.person-id-photo-container{
|
|
|
|
|
/deep/ .ant-modal-content{
|
|
|
|
|
background-color: white !important;
|
|
|
|
|
position: relative;
|
|
|
|
|
.ant-modal-close{
|
|
|
|
|
margin-right: 0 !important;
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-header{
|
|
|
|
|
background-color: white !important;
|
|
|
|
|
.ant-modal-title{
|
|
|
|
|
color: black !important;
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
padding-bottom: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-body{
|
|
|
|
|
position: initial !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
|
|
|
|
|
@ -436,7 +500,10 @@
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.upload-container-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editIcon {
|
|
|
|
|
@ -464,11 +531,6 @@
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fixBtnChange {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
top: 51%;
|
|
|
|
|
background: none;
|
|
|
|
|
@ -500,53 +562,35 @@
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.img-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.Uploader {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 110px !important;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
right: 70px;
|
|
|
|
|
margin-top: -24px;
|
|
|
|
|
/*display: inline-block;*/
|
|
|
|
|
top: 21%;
|
|
|
|
|
background: none;
|
|
|
|
|
right: 65px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
/*border-radius: 5px;*/
|
|
|
|
|
/*cursor: pointer;*/
|
|
|
|
|
/*.img-style {
|
|
|
|
|
border: none;
|
|
|
|
|
top: -37px;
|
|
|
|
|
left: -208px;
|
|
|
|
|
img {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
border-radius: 50% !important;
|
|
|
|
|
border: 2px solid #25e1ff !important;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-progress {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}*/
|
|
|
|
|
.upload-btn {
|
|
|
|
|
/*display: block !important;*/
|
|
|
|
|
.upload-Image-style {
|
|
|
|
|
width: 118px !important;
|
|
|
|
|
height: 47px !important;
|
|
|
|
|
background: none !important;
|
|
|
|
|
border: 1px solid #03EFFD !important;
|
|
|
|
|
.icon-style {
|
|
|
|
|
color: rgba(0, 0, 0, 0) !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-upload-text {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
margin-top: -1.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
top: 51%;
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.save-button{
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
