Compare commits

..

2 Commits

@ -27,42 +27,51 @@
<a-col :span="12" offset="1" class="perMsg colRight"> <a-col :span="12" offset="1" class="perMsg colRight">
<div class="colRightTbox"> <div class="colRightTbox">
<div class="titleLogo">头像信息</div> <div class="titleLogo">头像信息</div>
<div class="mypicture"> <a-row class="leftPic">
<img v-if="txfull" :src="imgSrc" alt="" <a-col :span="12" class="mypicture">
style="display:inline-block;width: 100%;height: 100%;" <img :src="imgSrc" alt=""
ref="imgChange"> style="display:inline-block;width: 100%;height: 100%;"
<img v-if="!txfull" src="./images/emptyPic.png" ref="imgChange">
style="display:inline-block;width: 100%;height: 100%;"> </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>
<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>
<div class="colRightBbox"> <div class="colRightBbox">
<div class="titleLogo">证件照信息</div> <div class="titleLogo">证件照信息</div>
<div class="mypicture"> <div class="colRightBbox_content">
<img ref="modifyPhoto" alt="" <div class="mypicture">
:src="idPhotoUrl" <img ref="modifyPhoto" alt=""
style="display:inline-block;width: 100%;height: 100%;"> :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> </div>
<a-button class="fixBtnChange" type="primary" @click="onShowCropper"></a-button>
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto"></a-button>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
</a-modal> </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"> :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> </modal-panel>
</div> </div>
</template> </template>
@ -77,14 +86,15 @@
import IDPhoto from '../../../../teacherInfo/fieldComponent/IDPhoto.vue' import IDPhoto from '../../../../teacherInfo/fieldComponent/IDPhoto.vue'
import ModalPanel from '../../../../../components/common/modal/ModalPanel'; import ModalPanel from '../../../../../components/common/modal/ModalPanel';
import ImgCropper from '../../../../../components/common/imgCropper/ImgCropper'; import ImgCropper from '../../../../../components/common/imgCropper/ImgCropper';
export default { export default {
name: "PersonMsgModal", name: "PersonMsgModal",
props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'], props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'],
data() { data() {
return { return {
destroyOnClose: false, destroyOnClose: false,
show:false, show: false,
photoTitle:"", photoTitle: "",
option: { option: {
img: "", img: "",
outputType: 'png', outputType: 'png',
@ -107,12 +117,11 @@
file: '', file: '',
fileList: [], fileList: [],
fileListPic: [], fileListPic: [],
txfull: true,
imgSrc: '', imgSrc: '',
modifyPhotoObj: {}, modifyPhotoObj: {},
idPhotoJson: {}, idPhotoJson: {},
idPhotoUrl:'', idPhotoUrl: '',
fileSize:"" fileSize: ""
} }
}, },
watch: { watch: {
@ -146,23 +155,23 @@
this.show = true; this.show = true;
}, },
onCallback: function ([type]) { onCallback: function ([type]) {
if (type === 'ok'){ if (type === 'ok') {
this.destroyOnClose = false; this.destroyOnClose = false;
// if (this.$refs.cropper.file){ // if (this.$refs.cropper.file){
// this.spinning = true; // this.spinning = true;
// } // }
this.$refs.cropper.getFile((file)=>{ this.$refs.cropper.getFile((file) => {
// this.data.props.imgFile = file // this.data.props.imgFile = file
if(this.$refs.cropper.file){ if (this.$refs.cropper.file) {
StaticParams.uploadFile(file,(data)=>{ StaticParams.uploadFile(file, (data) => {
if (data.success === true){ if (data.success === true) {
this.idPhotoUrl = this.BaseConfig.url_path_down + data.data.data.url; this.idPhotoUrl = this.BaseConfig.url_path_down + data.data.data.url;
this.fileSize = data.data.data.file_size; this.fileSize = data.data.data.file_size;
} }
},false)// }, false)//
} }
}); });
}else{ } else {
this.destroyOnClose = true; this.destroyOnClose = true;
} }
this.show = false; this.show = false;
@ -218,27 +227,23 @@
let res = result[0].data; let res = result[0].data;
if (res.code === 2000) { if (res.code === 2000) {
let file = res.data.id_photo_json; let file = res.data.id_photo_json;
console.log("file",file) if (file && file !== "") {
console.log("JSON.parse(file)",JSON.parse(file))
if(file && file !== ""){
this.idPhotoUrl = JSON.parse(file).url; this.idPhotoUrl = JSON.parse(file).url;
this.fileSize = JSON.parse(file).file_size; this.fileSize = JSON.parse(file).file_size;
this.option.img = this.idPhotoUrl; this.option.img = this.idPhotoUrl;
} }
console.log("idPhotoUrl:",this.idPhotoUrl)
console.log("fileSize:",this.fileSize)
} }
}) })
}, },
// //
saveIdPhoto:function () { saveIdPhoto: function () {
let param = { let param = {
person_id: this.BaseConfig.userInfo.person_id,//ID person_id: this.BaseConfig.userInfo.person_id,//ID
identity_id: this.BaseConfig.userInfo.identity_id,//"ID identity_id: this.BaseConfig.userInfo.identity_id,//"ID
org_id: this.BaseConfig.person_info_my.bureau_id, //ID org_id: this.BaseConfig.person_info_my.bureau_id, //ID
id_photo_json: JSON.stringify({ id_photo_json: JSON.stringify({
file_size:this.fileSize, file_size: this.fileSize,
url:this.idPhotoUrl url: this.idPhotoUrl
}), }),
} }
this.InterfaceConfig.callInterface([{ this.InterfaceConfig.callInterface([{
@ -249,7 +254,7 @@
}], (result) => { }], (result) => {
if (result[0].data.code === 2000) { if (result[0].data.code === 2000) {
message.success('修改成功') message.success('修改成功')
} else { } else {
message.error('修改失败') message.error('修改失败')
} }
}) })
@ -269,16 +274,11 @@
//console.log('', result) //console.log('', result)
if (result[0].data.file_id !== "") { if (result[0].data.file_id !== "") {
this.imgSrc = result[0].data.file_id + ',' + result[0].data.extension this.imgSrc = result[0].data.file_id + ',' + result[0].data.extension
// console.log('fileId', this.$refs.imgChange.src)
} else {
this.txfull = false
} }
}) })
}, },
// //
setPersonTx(val) { setPersonTx(val) {
console.log('huan', val)
this.txfull = true
let targetUrl = val.fileList[val.fileList.length - 1] let targetUrl = val.fileList[val.fileList.length - 1]
this.$refs.imgChange.src = targetUrl.thumbUrl this.$refs.imgChange.src = targetUrl.thumbUrl
}, },
@ -308,28 +308,29 @@
</script> </script>
<style scoped lang="scss" type="text/scss"> <style scoped lang="scss" type="text/scss">
.person-id-photo-container{ .person-id-photo-container {
/deep/ .ant-modal-content{ /deep/ .ant-modal-content {
background-color: white !important; background-color: white !important;
position: relative; position: relative;
.ant-modal-close{ .ant-modal-close {
margin-right: 0 !important; margin-right: 0 !important;
margin-top: 0 !important; margin-top: 0 !important;
} }
.ant-modal-header{ .ant-modal-header {
background-color: white !important; background-color: white !important;
.ant-modal-title{ .ant-modal-title {
color: black !important; color: black !important;
margin-top: 0 !important; margin-top: 0 !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
} }
.ant-modal-body{ .ant-modal-body {
position: initial !important; position: initial !important;
} }
} }
} }
/deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span { /deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span {
color: #fff !important; color: #fff !important;
@ -491,61 +492,66 @@
height: calc(50% - 8px); height: calc(50% - 8px);
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 8px; 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 { .editIcon {
width: 110px; width: 110px;
height: 110px; height: 30px;
margin-top: 20px; margin-top: 9px;
margin-left: 50px; display: flex;
border-radius: 50%; justify-content: space-between;
border: 1px solid #03EFFD; img {
overflow: hidden; width: 24px;
.upload-container-style{ height: 24px;
width: 100%; cursor: pointer;
height: 100%; }
} }
} }
.rightText {
.editIcon { width: 50%;
width: 220px; display: flex;
height: 30px; justify-content: center;
margin-top: 9px; align-items: flex-end;
flex-wrap: wrap;
img { .fixBtnChange, .fixBtnSave {
width: 24px; width: 120px;
height: 24px; height: 39px;
margin-right: 5px; line-height: 39px;
display: block;
border: 1px solid #03EFFD;
border-radius: 5px;
cursor: pointer; 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 { span {
right: 30px; display: block;
bottom: 0;
} }
} }
span {
display: inline-block;
position: absolute;
right: 20px;
bottom: 10px;
}
} }
.colRightBbox { .colRightBbox {
@ -553,44 +559,53 @@
border: 1px dashed #03EFFD; border: 1px dashed #03EFFD;
height: calc(50% - 8px); height: calc(50% - 8px);
border-radius: 8px; border-radius: 8px;
.colRightBbox_content {
.mypicture { width: 100%;
width: 110px; height: 100%;
height: 110px; display: flex;
margin-top: 32px; justify-content: space-around;
margin-left: 50px; align-items: center;
border-radius: 50%; .fixBtn {
border: 1px solid #03EFFD; width: 150px;
overflow: hidden; }
.upload-container-style{ .mypicture {
width: 100%; width: 110px;
height: 100%; height: 110px;
.img-style{ /*margin-top: 32px;*/
/*margin-left: 50px;*/
border-radius: 50%;
border: 1px solid #03EFFD;
overflow: hidden;
.upload-container-style {
width: 100%; width: 100%;
height: 100%; height: 100%;
.img-style {
width: 100%;
height: 100%;
}
} }
} }
} .fixBtnChange, .fixBtnSave {
.fixBtnChange, .fixBtnSave { /*position: absolute;*/
position: absolute; width: 120px;
width: 120px; height: 39px;
height: 39px; line-height: 39px;
line-height: 39px; /*top: 21%;*/
top: 21%; background: none;
background: none; /*right: 65px;*/
right: 65px; display: block;
display: inline-block; border: 1px solid #03EFFD;
border: 1px solid #03EFFD; border-radius: 5px;
border-radius: 5px; cursor: pointer;
cursor: pointer; text-align: center;
text-align: center; }
} .fixBtnSave {
.fixBtnSave { /*top: 51%;*/
top: 51%; background: none;
background: none; }
} .save-button {
.save-button{ margin-top: 50px;
margin-top: 50px; }
} }
} }
} }

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

Loading…
Cancel
Save