|
@@ -396,8 +396,9 @@
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="teacherIcon">
|
|
|
- <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
|
|
|
- <img v-else key="avatar" src="@/assets/images/base/woman.png" alt />
|
|
|
+ <image-cropper ref="imgCropper" :options="cropperOptions" :imgSize="2" showSize :imageUrl="topForm.avatar?topForm.avatar:avatar1" @crop-upload-success="handleSuccess" />
|
|
|
+ <!-- <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
|
|
|
+ <img v-else key="avatar1" src="@/assets/images/base/woman.png" alt /> -->
|
|
|
</div>
|
|
|
<!-- <el-upload
|
|
|
class="ivu-upload"
|
|
@@ -410,8 +411,8 @@
|
|
|
multiple
|
|
|
action="/api-web/uploadFile"
|
|
|
> -->
|
|
|
- <image-cropper :options="cropperOptions" :imgSize="2" showSize :imageUrl="topForm.avatar" @crop-upload-success="handleSuccess" />
|
|
|
- <el-button icon="ios-cloud-upload-outline">修改头像</el-button>
|
|
|
+
|
|
|
+ <!-- <el-button icon="ios-cloud-upload-outline" @click="$refs.imgCropper.$refs.upload.submit">修改头像</el-button> -->
|
|
|
<!--
|
|
|
v-if="pageType != 'create'"
|
|
|
<el-button
|
|
@@ -423,7 +424,7 @@
|
|
|
}"
|
|
|
>新增头像</el-button
|
|
|
> -->
|
|
|
- </el-upload>
|
|
|
+ <!-- </el-upload> -->
|
|
|
<p class="iconP">
|
|
|
推荐图片尺寸:200x200;
|
|
|
<br />支持的格式:jpg,jpeg,png,gif;
|
|
@@ -443,6 +444,8 @@ import store from "@/store";
|
|
|
import { permission } from "@/utils/directivePage";
|
|
|
import { jobNature, ProbationPeriodList } from "@/utils/searchArray";
|
|
|
import { isvalidPhone } from "@/utils/validate";
|
|
|
+import ImageCropper from "@/components/ImageCropper";
|
|
|
+import avatar1 from '@/assets/images/base/woman.png'
|
|
|
import dayjs from "dayjs";
|
|
|
let validPhone = (rule, value, callback) => {
|
|
|
if (!value) {
|
|
@@ -462,6 +465,7 @@ export default {
|
|
|
headers: {
|
|
|
Authorization: getToken(),
|
|
|
},
|
|
|
+ avatar1,
|
|
|
jobNature: jobNature,
|
|
|
ProbationPeriodList: ProbationPeriodList,
|
|
|
organId: null,
|
|
@@ -549,17 +553,17 @@ export default {
|
|
|
},
|
|
|
cropperOptions: {
|
|
|
autoCrop: true, //是否默认生成截图框
|
|
|
- autoCropWidth: 300, //默认生成截图框宽度
|
|
|
- autoCropHeight: 300, //默认生成截图框高度
|
|
|
+ autoCropWidth: 200, //默认生成截图框宽度
|
|
|
+ autoCropHeight: 200, //默认生成截图框高度
|
|
|
fixedBox: true, //是否固定截图框大小 不允许改变
|
|
|
previewsCircle: false, //预览图是否是圆形
|
|
|
title: "老师头像", //模态框上显示的标题
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
- // components:{
|
|
|
- // imageCropper
|
|
|
- // },
|
|
|
+ components:{
|
|
|
+ ImageCropper
|
|
|
+ },
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
this.pageType = this.$route.query.type;
|
|
@@ -771,10 +775,11 @@ export default {
|
|
|
// 获取富文本组件实例
|
|
|
// let quill = this.editor
|
|
|
// 如果上传成功
|
|
|
- if (res.code == 200) {
|
|
|
+ // if (res.code == 200) {
|
|
|
+ console.log(res)
|
|
|
// 获取光标所在位置
|
|
|
this.topForm.avatar = res.data.url;
|
|
|
- }
|
|
|
+ // }
|
|
|
},
|
|
|
// 选择分部
|
|
|
switchOrgan() {
|
|
@@ -867,19 +872,19 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- .teacherIcon {
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- // border: 1px solid #444;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 20px;
|
|
|
- img {
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .teacherIcon {
|
|
|
+ // width: 150px;
|
|
|
+ // height: 150px;
|
|
|
+ // // border: 1px solid #444;
|
|
|
+ // border-radius: 50%;
|
|
|
+ // overflow: hidden;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ // img {
|
|
|
+ // width: 150px;
|
|
|
+ // height: 150px;
|
|
|
+ // object-fit: cover;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
.iconP {
|
|
|
margin-top: 10px;
|