|
|
|
@ -27,42 +27,51 @@
|
|
|
|
|
<a-col :span="12" offset="1" class="perMsg colRight">
|
|
|
|
|
<div class="colRightTbox">
|
|
|
|
|
<div class="titleLogo">头像信息</div>
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<img v-if="txfull" :src="imgSrc" alt=""
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;"
|
|
|
|
|
ref="imgChange">
|
|
|
|
|
<img v-if="!txfull" src="./images/emptyPic.png"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
<a-row class="leftPic">
|
|
|
|
|
<a-col :span="12" class="mypicture">
|
|
|
|
|
<img :src="imgSrc" alt=""
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;"
|
|
|
|
|
ref="imgChange">
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12" class="editIcon">
|
|
|
|
|
<img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)">
|
|
|
|
|
<img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)">
|
|
|
|
|
<img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)">
|
|
|
|
|
<img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)">
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<div class="rightText">
|
|
|
|
|
<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"
|
|
|
|
|
v-model:file-list="fileListPic"
|
|
|
|
|
class="fixBtnChange" @change="setPersonTx">更换图片
|
|
|
|
|
</a-upload>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveTx">保存头像</a-button>
|
|
|
|
|
<span>仅支持.jpg.jpeg.png.bmp图片格式</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="editIcon">
|
|
|
|
|
<img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)">
|
|
|
|
|
<img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)">
|
|
|
|
|
<img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)">
|
|
|
|
|
<img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)">
|
|
|
|
|
</div>
|
|
|
|
|
<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"
|
|
|
|
|
v-model:file-list="fileListPic"
|
|
|
|
|
class="fixBtnChange" @change="setPersonTx">更换图片
|
|
|
|
|
</a-upload>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveTx">保存头像</a-button>
|
|
|
|
|
<span>仅支持.jpg.jpeg.png.bmp图片格式</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="colRightBbox">
|
|
|
|
|
<div class="titleLogo">证件照信息</div>
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<img ref="modifyPhoto" alt=""
|
|
|
|
|
:src="idPhotoUrl"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
<div class="colRightBbox_content">
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<img ref="modifyPhoto" alt=""
|
|
|
|
|
:src="idPhotoUrl"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fixBtn">
|
|
|
|
|
<a-button class="fixBtnChange" type="primary" @click="onShowCropper">修改证件照</a-button>
|
|
|
|
|
<br>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto">保存证件照</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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"
|
|
|
|
|
<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"/>
|
|
|
|
|
<img-cropper selectBtnName="选择证件照" :option="option" ref="cropper" :cropperName="photoTitle"
|
|
|
|
|
:can-upload="false"/>
|
|
|
|
|
</modal-panel>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
@ -77,14 +86,15 @@
|
|
|
|
|
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:"",
|
|
|
|
|
show: false,
|
|
|
|
|
photoTitle: "",
|
|
|
|
|
option: {
|
|
|
|
|
img: "",
|
|
|
|
|
outputType: 'png',
|
|
|
|
@ -107,12 +117,11 @@
|
|
|
|
|
file: '',
|
|
|
|
|
fileList: [],
|
|
|
|
|
fileListPic: [],
|
|
|
|
|
txfull: true,
|
|
|
|
|
imgSrc: '',
|
|
|
|
|
modifyPhotoObj: {},
|
|
|
|
|
idPhotoJson: {},
|
|
|
|
|
idPhotoUrl:'',
|
|
|
|
|
fileSize:""
|
|
|
|
|
idPhotoUrl: '',
|
|
|
|
|
fileSize: ""
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
@ -146,23 +155,23 @@
|
|
|
|
|
this.show = true;
|
|
|
|
|
},
|
|
|
|
|
onCallback: function ([type]) {
|
|
|
|
|
if (type === 'ok'){
|
|
|
|
|
if (type === 'ok') {
|
|
|
|
|
this.destroyOnClose = false;
|
|
|
|
|
// if (this.$refs.cropper.file){
|
|
|
|
|
// this.spinning = true;
|
|
|
|
|
// }
|
|
|
|
|
this.$refs.cropper.getFile((file)=>{
|
|
|
|
|
this.$refs.cropper.getFile((file) => {
|
|
|
|
|
// this.data.props.imgFile = file
|
|
|
|
|
if(this.$refs.cropper.file){
|
|
|
|
|
StaticParams.uploadFile(file,(data)=>{
|
|
|
|
|
if (data.success === true){
|
|
|
|
|
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)//不插入资源库
|
|
|
|
|
}, false)//不插入资源库
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}else{
|
|
|
|
|
} else {
|
|
|
|
|
this.destroyOnClose = true;
|
|
|
|
|
}
|
|
|
|
|
this.show = false;
|
|
|
|
@ -218,27 +227,23 @@
|
|
|
|
|
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 !== ""){
|
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//保存证件照
|
|
|
|
|
saveIdPhoto:function () {
|
|
|
|
|
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: JSON.stringify({
|
|
|
|
|
file_size:this.fileSize,
|
|
|
|
|
url:this.idPhotoUrl
|
|
|
|
|
file_size: this.fileSize,
|
|
|
|
|
url: this.idPhotoUrl
|
|
|
|
|
}),
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
@ -249,7 +254,7 @@
|
|
|
|
|
}], (result) => {
|
|
|
|
|
if (result[0].data.code === 2000) {
|
|
|
|
|
message.success('修改成功')
|
|
|
|
|
} else {
|
|
|
|
|
} else {
|
|
|
|
|
message.error('修改失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
@ -269,16 +274,11 @@
|
|
|
|
|
//console.log('获取头像', result)
|
|
|
|
|
if (result[0].data.file_id !== "") {
|
|
|
|
|
this.imgSrc = result[0].data.file_id + ',' + result[0].data.extension
|
|
|
|
|
// console.log('fileId', this.$refs.imgChange.src)
|
|
|
|
|
} else {
|
|
|
|
|
this.txfull = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//更换头像
|
|
|
|
|
setPersonTx(val) {
|
|
|
|
|
console.log('huan', val)
|
|
|
|
|
this.txfull = true
|
|
|
|
|
let targetUrl = val.fileList[val.fileList.length - 1]
|
|
|
|
|
this.$refs.imgChange.src = targetUrl.thumbUrl
|
|
|
|
|
},
|
|
|
|
@ -308,28 +308,29 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss" type="text/scss">
|
|
|
|
|
.person-id-photo-container{
|
|
|
|
|
/deep/ .ant-modal-content{
|
|
|
|
|
.person-id-photo-container {
|
|
|
|
|
/deep/ .ant-modal-content {
|
|
|
|
|
background-color: white !important;
|
|
|
|
|
position: relative;
|
|
|
|
|
.ant-modal-close{
|
|
|
|
|
.ant-modal-close {
|
|
|
|
|
margin-right: 0 !important;
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-header{
|
|
|
|
|
.ant-modal-header {
|
|
|
|
|
background-color: white !important;
|
|
|
|
|
.ant-modal-title{
|
|
|
|
|
.ant-modal-title {
|
|
|
|
|
color: black !important;
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
padding-bottom: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-body{
|
|
|
|
|
.ant-modal-body {
|
|
|
|
|
position: initial !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
|
|
|
|
@ -491,61 +492,66 @@
|
|
|
|
|
height: calc(50% - 8px);
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
.leftPic {
|
|
|
|
|
width: 42%;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: auto;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.editIcon {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
margin-top: 9px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
img {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editIcon {
|
|
|
|
|
width: 220px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
margin-top: 9px;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
.rightText {
|
|
|
|
|
width: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
background: none;
|
|
|
|
|
span {
|
|
|
|
|
right: 30px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
top: 21%;
|
|
|
|
|
right: 65px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
top: 51%;
|
|
|
|
|
background: none;
|
|
|
|
|
span {
|
|
|
|
|
right: 30px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.colRightBbox {
|
|
|
|
@ -553,44 +559,53 @@
|
|
|
|
|
border: 1px dashed #03EFFD;
|
|
|
|
|
height: calc(50% - 8px);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
margin-top: 32px;
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.img-style{
|
|
|
|
|
.colRightBbox_content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.fixBtn {
|
|
|
|
|
width: 150px;
|
|
|
|
|
}
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
/*margin-top: 32px;*/
|
|
|
|
|
/*margin-left: 50px;*/
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.img-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
top: 21%;
|
|
|
|
|
background: none;
|
|
|
|
|
right: 65px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
top: 51%;
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.save-button{
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
/*position: absolute;*/
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
/*top: 21%;*/
|
|
|
|
|
background: none;
|
|
|
|
|
/*right: 65px;*/
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
/*top: 51%;*/
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.save-button {
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|