洋浦学校八大中心 德育管理前端

init
gongdi 3 years ago
parent 0e3d61e064
commit 634346af0f

@ -16,7 +16,7 @@
export default {
data() {
return {
imgUrl: this.$store.state.userStore.portraitUrl,
imgUrl: ""
}
},
props: ['personId'],
@ -24,13 +24,7 @@
if(this.$props.personId !== ""){
this.getImgSrc(this.$props.personId)
}
// if (!this.imgUrl || this.imgUrl === "") {
// this.getImgSrc(this.$props.personId)
// }
},
// mounted() {
// this.getImgSrc()
// },
methods: {
showMessage() {
this.$emit('showMessage')
@ -49,36 +43,16 @@
// console.log('------', result)
if (result[0].data.file_id !== "") {
//this.imgUrl = result[0].data.file_id + ',' + result[0].data.extension
this.imgUrl = StaticParams.getThumbUrl(result[0].data.file_id + "." + result[0].data.extension, 100, 100, 100);
let url = StaticParams.getThumbUrl(result[0].data.file_id + "." + result[0].data.extension, 100, 100, 100);
this.imgUrl = url;
}
})
},
// getImgSrc: function (personId) {
// if (personId && personId != '') {
// this.InterfaceConfig.callInterface([{
// url: interConfig.getPersonTxByYw.url,
// params: {
// person_id: personId,
// identity_id: 5,
// },
// method: interConfig.getPersonTxByYw.method,
// isTestLogin: interConfig.getPersonTxByYw.isTestLogin,
// }], (result) => {
// let resData = result[0].data;
// if (result[0].status === 200) {
// if (resData.success === true) {
// this.imgUrl = StaticParams.getThumbUrl(resData.file_id + "." + resData.extension, 100, 100, 100);
// this.$store.commit('userStore/setPortraitUrl', this.imgUrl);
// }
// }
// })
// }
// }
},
watch: {
personId: function (newVal) {
this.getImgSrc(newVal)
}
},
},
components: {
AAvatar: Avatar

@ -0,0 +1,76 @@
<template>
<div class="portrait-style">
<a-avatar slot="avatar" :src="imgUrl" @click="showMessage"></a-avatar>
</div>
</template>
<script>
/**
* 导航头像组件
* src
*/
import interConfig from '../api/commonInter.js';
import {Avatar} from 'ant-design-vue';
import BaseConfig from '../../../global-llibs/base-config'
import StaticParams from '../../../global-llibs/staticParams';
export default {
data() {
return {
imgUrl: this.$store.state.userStore.portraitUrl,
}
},
props: ['personId'],
created() {
if(this.$props.personId !== ""){
this.getImgSrc(this.$props.personId)
}
},
methods: {
showMessage() {
this.$emit('showMessage')
},
getImgSrc(personId) {
let param = {
person_id: personId,
identity_id: 5
}
this.InterfaceConfig.callInterface([{
url: interConfig.getPersonTxBy.url,
params: param,
method: interConfig.getPersonTxBy.method,
isTestLogin: interConfig.getPersonTxBy.isTestLogin,
}], (result) => {
// console.log('------', result)
if (result[0].data.file_id !== "") {
//this.imgUrl = result[0].data.file_id + ',' + result[0].data.extension
let url = StaticParams.getThumbUrl(result[0].data.file_id + "." + result[0].data.extension, 100, 100, 100);
this.imgUrl = url;
}
})
},
},
watch: {
personId: function (newVal) {
this.getImgSrc(newVal)
},
'$store.state.userStore.portraitUrl': function (newVal,oldVal) {
this.imgUrl = newVal;
},
},
components: {
AAvatar: Avatar
}
}
</script>
<style scoped lang="scss">
.portrait-style {
display: flex;
justify-content: center;
align-items: center;
/*cursor:pointer;*/
.ant-avatar {
width: 32px;
height: 32px;
}
}
</style>

@ -19,7 +19,7 @@
</div>
</template>
<script>
import Portrait from '../../../common/portrait.vue';
import Portrait from '../../../common/topPortrait.vue';
import {Icon} from 'ant-design-vue';
import PersonMsgModal from './personMsgModal';
import interfaceConfig from '../../../../../global-llibs/axios-config'

@ -27,28 +27,41 @@
<a-col :span="12" offset="1" class="perMsg colRight">
<div class="colRightTbox">
<div class="titleLogo">头像信息</div>
<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>
<!--<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="colRightBbox_content">
<div class="mypicture">
<img ref="modifyPhoto" alt=""
:src="txPhotoUrl"
style="display:inline-block;width: 100%;height: 100%;">
</div>
<div class="fixBtn">
<a-button class="fixBtnChange" type="primary" @click="onShowCropper(1)"></a-button>
<br>
<a-button class="fixBtnSave" type="primary" @click="saveTxPhoto"></a-button>
</div>
</div>
<!--<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="colRightBbox">
<div class="titleLogo">证件照信息</div>
<div class="colRightBbox_content">
@ -58,7 +71,7 @@
style="display:inline-block;width: 100%;height: 100%;">
</div>
<div class="fixBtn">
<a-button class="fixBtnChange" type="primary" @click="onShowCropper"></a-button>
<a-button class="fixBtnChange" type="primary" @click="onShowCropper(0)"></a-button>
<br>
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto"></a-button>
</div>
@ -67,10 +80,10 @@
</a-col>
</a-row>
</a-modal>
<modal-panel addChildType="slot" modalTitle="上传证件照" :show="show" modalWidth="60%"
<modal-panel addChildType="slot" :modalTitle="photoType === 0?'上传证件照':'上传头像'" :show="show" modalWidth="60%"
class="person-id-photo-container"
:destroyOnClose="destroyOnClose" @callback="onCallback">
<img-cropper selectBtnName="选择证件照" :option="option" ref="cropper" :cropperName="photoTitle"
<img-cropper selectBtnName="选择" :option="option" ref="cropper" :cropperName="photoTitle"
:can-upload="false"/>
</modal-panel>
</div>
@ -92,6 +105,7 @@
props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'],
data() {
return {
photoType:0,//0 1
destroyOnClose: false,
show: false,
photoTitle: "",
@ -121,13 +135,19 @@
modifyPhotoObj: {},
idPhotoJson: {},
idPhotoUrl: '',
fileSize: ""
txPhotoUrl:'',
fileSize: "",
idFileId:"",
idExtension:"",
txFileId:"",
txExtension:""
}
},
watch: {
visible(newVal) {
if (newVal) {
this.getModifyPhoto()
this.getPersonTx()
}
},
},
@ -151,7 +171,13 @@
this.getPersonTx()
},
methods: {
onShowCropper: function () {
onShowCropper: function (type) {
if(type === 0){
this.option.img = this.idPhotoUrl;
}else {
this.option.img = this.txPhotoUrl;
}
this.photoType = type;
this.show = true;
},
onCallback: function ([type]) {
@ -165,8 +191,17 @@
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;
if(this.photoType === 0){
this.idFileId = data.data.data.file_id;
this.idExtension = data.data.data.extension;
let url = BaseConfig.url_path_suffix + this.idFileId.substring(0, 2) + "/" + this.idFileId + "." + this.idExtension;
this.idPhotoUrl = this.BaseConfig.url_path_down + url;
}else{
this.txFileId = data.data.data.file_id;
this.txExtension = data.data.data.extension;
let url = BaseConfig.url_path_suffix + this.txFileId.substring(0, 2) + "/" + this.txFileId + "." + this.txExtension;
this.txPhotoUrl = this.BaseConfig.url_path_down + url;
}
}
}, false)//
}
@ -228,9 +263,11 @@
if (res.code === 2000) {
let file = res.data.id_photo_json;
if (file && file !== "") {
this.idPhotoUrl = JSON.parse(file).url;
this.fileSize = JSON.parse(file).file_size;
this.option.img = this.idPhotoUrl;
this.idFileId = JSON.parse(file).fileId;
this.idExtension = JSON.parse(file).extension;
let url = BaseConfig.url_path_suffix + this.idFileId.substring(0, 2) + "/" + this.idFileId + "." + this.idExtension;
this.idPhotoUrl = this.BaseConfig.url_path_down + url;
// this.option.img = this.idPhotoUrl;
}
}
})
@ -242,8 +279,8 @@
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
extension: this.idExtension,
fileId: this.idFileId
}),
}
this.InterfaceConfig.callInterface([{
@ -259,50 +296,53 @@
}
})
},
//
getPersonTx() {
//
saveTxPhoto: function () {
let param = {
person_id: BaseConfig.userInfo.person_id_cookie,
identity_id: BaseConfig.userInfo.identity_id_cookie
identity_id: BaseConfig.userInfo.identity_id_cookie,
file_id: this.txFileId,
extension: this.txExtension
}
this.InterfaceConfig.callInterface([{
url: InterConfig.getPersonTxByYw.url,
url: InterConfig.setPersonTxByYw.url,
params: param,
method: InterConfig.getPersonTxByYw.method,
isTestLogin: InterConfig.getPersonTxByYw.isTestLogin,
method: InterConfig.setPersonTxByYw.method,
isTestLogin: InterConfig.setPersonTxByYw.isTestLogin,
}], (result) => {
//console.log('', result)
if (result[0].data.file_id !== "") {
this.imgSrc = result[0].data.file_id + ',' + result[0].data.extension
if (result[0].data.success === true) {
message.success('修改成功')
this.getPersonTx();
} else {
message.error('修改失败')
}
})
},
//
setPersonTx(val) {
let targetUrl = val.fileList[val.fileList.length - 1]
this.$refs.imgChange.src = targetUrl.thumbUrl
},
//
saveTx() {
//
getPersonTx() {
let param = {
person_id: BaseConfig.userInfo.person_id_cookie,
identity_id: BaseConfig.userInfo.identity_id_cookie,
file_id: this.$refs.imgChange.src,
extension: 'png',
identity_id: BaseConfig.userInfo.identity_id_cookie
}
this.InterfaceConfig.callInterface([{
url: InterConfig.setPersonTxByYw.url,
url: InterConfig.getPersonTxByYw.url,
params: param,
method: InterConfig.setPersonTxByYw.method,
isTestLogin: InterConfig.setPersonTxByYw.isTestLogin,
method: InterConfig.getPersonTxByYw.method,
isTestLogin: InterConfig.getPersonTxByYw.isTestLogin,
}], (result) => {
if (!result[0].data.success) {
message.error('保存失败')
} else {
message.success('保存成功')
let res = result[0]
if(res.status === 200){
let obj = res.data;
if(obj.file_id && obj.file_id !== ""){
this.txFileId = obj.file_id;
this.txExtension = obj.extension;
let url = BaseConfig.url_path_suffix + this.txFileId.substring(0, 2) + "/" + this.txFileId + "." + this.txExtension;
this.txPhotoUrl = this.BaseConfig.url_path_down + url;
this.$store.commit('userStore/setPortraitUrl', this.txPhotoUrl);
}
})
}
})
},
}
}
</script>
@ -490,9 +530,55 @@
position: relative;
border: 1px dashed #03EFFD;
height: calc(50% - 8px);
margin-bottom: 16px;
border-radius: 8px;
.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: block;
border: 1px solid #03EFFD;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
.fixBtnSave {
/*top: 51%;*/
background: none;
}
.save-button {
margin-top: 50px;
}
}
.leftPic {
width: 42%;
display: flex;
@ -525,40 +611,13 @@
}
}
}
.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;
}
}
span {
display: block;
}
}
}
.colRightBbox {
position: relative;
border: 1px dashed #03EFFD;
height: calc(50% - 8px);
border-radius: 8px;
margin-top: 16px;
.colRightBbox_content {
width: 100%;
height: 100%;
@ -607,6 +666,38 @@
margin-top: 50px;
}
}
.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%;
}
}
.editIcon {
width: 110px;
height: 30px;
margin-top: 9px;
display: flex;
justify-content: space-between;
img {
width: 24px;
height: 24px;
cursor: pointer;
}
}
}
}
}
}

Loading…
Cancel
Save