Compare commits

..

2 Commits

@ -27,19 +27,20 @@
<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">
<img :src="imgSrc" alt=""
style="display:inline-block;width: 100%;height: 100%;" style="display:inline-block;width: 100%;height: 100%;"
ref="imgChange"> ref="imgChange">
<img v-if="!txfull" src="./images/emptyPic.png" </a-col>
style="display:inline-block;width: 100%;height: 100%;"> <a-col :span="12" class="editIcon">
</div>
<div class="editIcon">
<img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)"> <img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)">
<img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)"> <img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)">
<img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)"> <img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)">
<img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)"> <img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)">
</div> </a-col>
</a-row>
<div class="rightText">
<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture" <a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"
v-model:file-list="fileListPic" v-model:file-list="fileListPic"
class="fixBtnChange" @change="setPersonTx">更换图片 class="fixBtnChange" @change="setPersonTx">更换图片
@ -47,22 +48,30 @@
<a-button class="fixBtnSave" type="primary" @click="saveTx"></a-button> <a-button class="fixBtnSave" type="primary" @click="saveTx"></a-button>
<span>仅支持.jpg.jpeg.png.bmp图片格式</span> <span>仅支持.jpg.jpeg.png.bmp图片格式</span>
</div> </div>
</div>
<div class="colRightBbox"> <div class="colRightBbox">
<div class="titleLogo">证件照信息</div> <div class="titleLogo">证件照信息</div>
<div class="colRightBbox_content">
<div class="mypicture"> <div class="mypicture">
<img ref="modifyPhoto" alt="" <img ref="modifyPhoto" alt=""
:src="idPhotoUrl" :src="idPhotoUrl"
style="display:inline-block;width: 100%;height: 100%;"> style="display:inline-block;width: 100%;height: 100%;">
</div> </div>
<div class="fixBtn">
<a-button class="fixBtnChange" type="primary" @click="onShowCropper"></a-button> <a-button class="fixBtnChange" type="primary" @click="onShowCropper"></a-button>
<br>
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto"></a-button> <a-button class="fixBtnSave" type="primary" @click="saveIdPhoto"></a-button>
</div> </div>
</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([{
@ -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,48 +492,55 @@
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 { .mypicture {
width: 110px; width: 110px;
height: 110px; height: 110px;
margin-top: 20px; margin-top: 20px;
margin-left: 50px;
border-radius: 50%; border-radius: 50%;
border: 1px solid #03EFFD; border: 1px solid #03EFFD;
overflow: hidden; overflow: hidden;
.upload-container-style{ .upload-container-style {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.editIcon { .editIcon {
width: 220px; width: 110px;
height: 30px; height: 30px;
margin-top: 9px; margin-top: 9px;
display: flex;
justify-content: space-between;
img { img {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 5px;
cursor: pointer; cursor: pointer;
} }
} }
}
.rightText {
width: 50%;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
.fixBtnChange, .fixBtnSave { .fixBtnChange, .fixBtnSave {
position: absolute;
width: 120px; width: 120px;
height: 39px; height: 39px;
line-height: 39px; line-height: 39px;
top: 21%; display: block;
right: 65px;
display: inline-block;
border: 1px solid #03EFFD; border: 1px solid #03EFFD;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
.fixBtnSave { .fixBtnSave {
top: 51%;
background: none; background: none;
span { span {
right: 30px; right: 30px;
@ -541,10 +549,8 @@
} }
span { span {
display: inline-block; display: block;
position: absolute; }
right: 20px;
bottom: 10px;
} }
} }
@ -553,48 +559,57 @@
border: 1px dashed #03EFFD; border: 1px dashed #03EFFD;
height: calc(50% - 8px); height: calc(50% - 8px);
border-radius: 8px; border-radius: 8px;
.colRightBbox_content {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.fixBtn {
width: 150px;
}
.mypicture { .mypicture {
width: 110px; width: 110px;
height: 110px; height: 110px;
margin-top: 32px; /*margin-top: 32px;*/
margin-left: 50px; /*margin-left: 50px;*/
border-radius: 50%; border-radius: 50%;
border: 1px solid #03EFFD; border: 1px solid #03EFFD;
overflow: hidden; overflow: hidden;
.upload-container-style{ .upload-container-style {
width: 100%; width: 100%;
height: 100%; height: 100%;
.img-style{ .img-style {
width: 100%; width: 100%;
height: 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: inline-block; display: 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