|
|
@@ -1,9 +1,22 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
|
|
|
+ <div class="user-info-head" @click="editCropper()">
|
|
|
+ <img
|
|
|
+ v-bind:src="options.img"
|
|
|
+ title="点击上传头像"
|
|
|
+ class="img-circle img-lg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="800px"
|
|
|
+ append-to-body
|
|
|
+ @opened="modalOpened"
|
|
|
+ @close="closeDialog"
|
|
|
+ >
|
|
|
<el-row>
|
|
|
- <el-col :xs="24" :md="12" :style="{height: '350px'}">
|
|
|
+ <el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
|
|
<vue-cropper
|
|
|
ref="cropper"
|
|
|
:img="options.img"
|
|
|
@@ -17,7 +30,7 @@
|
|
|
v-if="visible"
|
|
|
/>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :md="12" :style="{height: '350px'}">
|
|
|
+ <el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
|
|
<div class="avatar-upload-preview">
|
|
|
<img :src="previews.url" :style="previews.img" />
|
|
|
</div>
|
|
|
@@ -26,27 +39,50 @@
|
|
|
<br />
|
|
|
<el-row>
|
|
|
<el-col :lg="2" :sm="3" :xs="3">
|
|
|
- <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
|
|
|
+ <el-upload
|
|
|
+ action="#"
|
|
|
+ :http-request="requestUpload"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ >
|
|
|
<el-button size="small">
|
|
|
选择
|
|
|
<i class="el-icon-upload el-icon--right"></i>
|
|
|
</el-button>
|
|
|
</el-upload>
|
|
|
</el-col>
|
|
|
- <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
|
|
|
- <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
|
|
|
+ <el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ @click="changeScale(1)"
|
|
|
+ ></el-button>
|
|
|
</el-col>
|
|
|
- <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
|
|
|
- <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
|
|
|
+ <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-minus"
|
|
|
+ size="small"
|
|
|
+ @click="changeScale(-1)"
|
|
|
+ ></el-button>
|
|
|
</el-col>
|
|
|
- <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
|
|
|
- <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
|
|
|
+ <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-refresh-left"
|
|
|
+ size="small"
|
|
|
+ @click="rotateLeft()"
|
|
|
+ ></el-button>
|
|
|
</el-col>
|
|
|
- <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
|
|
|
- <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
|
|
|
+ <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-refresh-right"
|
|
|
+ size="small"
|
|
|
+ @click="rotateRight()"
|
|
|
+ ></el-button>
|
|
|
</el-col>
|
|
|
- <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
|
|
|
- <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
|
|
|
+ <el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2">
|
|
|
+ <el-button type="primary" size="small" @click="uploadImg()"
|
|
|
+ >提 交</el-button
|
|
|
+ >
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-dialog>
|
|
|
@@ -57,14 +93,14 @@
|
|
|
import store from "@/store";
|
|
|
import { VueCropper } from "vue-cropper";
|
|
|
import { uploadAvatar } from "@/api/system/user";
|
|
|
-import { debounce } from '@/utils'
|
|
|
+import { debounce } from "@/utils";
|
|
|
|
|
|
export default {
|
|
|
components: { VueCropper },
|
|
|
props: {
|
|
|
user: {
|
|
|
- type: Object
|
|
|
- }
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -80,10 +116,10 @@ export default {
|
|
|
autoCropWidth: 200, // 默认生成截图框宽度
|
|
|
autoCropHeight: 200, // 默认生成截图框高度
|
|
|
fixedBox: true, // 固定截图框大小 不允许改变
|
|
|
- outputType:"png" // 默认生成截图为PNG格式
|
|
|
+ outputType: "png", // 默认生成截图为PNG格式
|
|
|
},
|
|
|
previews: {},
|
|
|
- resizeHandler: null
|
|
|
+ resizeHandler: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -96,18 +132,17 @@ export default {
|
|
|
this.visible = true;
|
|
|
if (!this.resizeHandler) {
|
|
|
this.resizeHandler = debounce(() => {
|
|
|
- this.refresh()
|
|
|
- }, 100)
|
|
|
+ this.refresh();
|
|
|
+ }, 100);
|
|
|
}
|
|
|
- window.addEventListener("resize", this.resizeHandler)
|
|
|
+ window.addEventListener("resize", this.resizeHandler);
|
|
|
},
|
|
|
// 刷新组件
|
|
|
refresh() {
|
|
|
this.$refs.cropper.refresh();
|
|
|
},
|
|
|
// 覆盖默认的上传行为
|
|
|
- requestUpload() {
|
|
|
- },
|
|
|
+ requestUpload() {},
|
|
|
// 向左旋转
|
|
|
rotateLeft() {
|
|
|
this.$refs.cropper.rotateLeft();
|
|
|
@@ -124,7 +159,9 @@ export default {
|
|
|
// 上传预处理
|
|
|
beforeUpload(file) {
|
|
|
if (file.type.indexOf("image/") == -1) {
|
|
|
- this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
|
|
+ this.$modal.msgError(
|
|
|
+ "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
|
|
|
+ );
|
|
|
} else {
|
|
|
const reader = new FileReader();
|
|
|
reader.readAsDataURL(file);
|
|
|
@@ -135,13 +172,13 @@ export default {
|
|
|
},
|
|
|
// 上传图片
|
|
|
uploadImg() {
|
|
|
- this.$refs.cropper.getCropBlob(data => {
|
|
|
+ this.$refs.cropper.getCropBlob((data) => {
|
|
|
let formData = new FormData();
|
|
|
formData.append("avatarfile", data);
|
|
|
- uploadAvatar(formData).then(response => {
|
|
|
+ uploadAvatar(formData).then((response) => {
|
|
|
this.open = false;
|
|
|
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
|
|
- store.commit('SET_AVATAR', this.options.img);
|
|
|
+ store.commit("SET_AVATAR", this.options.img);
|
|
|
this.$modal.msgSuccess("修改成功");
|
|
|
this.visible = false;
|
|
|
});
|
|
|
@@ -153,11 +190,11 @@ export default {
|
|
|
},
|
|
|
// 关闭窗口
|
|
|
closeDialog() {
|
|
|
- this.options.img = store.getters.avatar
|
|
|
+ this.options.img = store.getters.avatar;
|
|
|
this.visible = false;
|
|
|
- window.removeEventListener("resize", this.resizeHandler)
|
|
|
- }
|
|
|
- }
|
|
|
+ window.removeEventListener("resize", this.resizeHandler);
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@@ -168,7 +205,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.user-info-head:hover:after {
|
|
|
- content: '+';
|
|
|
+ content: "+";
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
lph