Compare commits

..

2 Commits

@ -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;
}
}
}
}

@ -458,6 +458,7 @@
}], (result) => {
this.spinning = false;
if (result[0].data.result.length != 0) {
// console.log('result', JSON.parse(result[0].data.result))
this.studentManageData4 = JSON.parse(result[0].data.result)
this.studentManageData4.forEach(item => {
if (item.stage_name == '小学') {
@ -468,10 +469,12 @@
this.collapseData[2].tableData.push(item)
}
})
}
if (this.collapseData[0].tableData.length === 0 || this.collapseData[0].headText.length === 0) {
} else {
this.collapseDataEmpty = true
}
// if (this.collapseData[0].tableData.length === 0 || this.collapseData[0].headText.length === 0) {
// this.collapseDataEmpty = true
// }
})
},
//

Loading…
Cancel
Save