xinyilu/NurseStationOperateUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
曹辉 2022-11-16 13:21:48 +08:00
parent e80fb60fab
commit 53106187dc
1 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/system/stationAvatar/index.vue
View File

@ -8,7 +8,7 @@
<img <img
v-if="options.img" v-if="options.img"
v-bind:src="options.img" v-bind:src="options.img"
title="点击上传头像" title="点击上传图片"
style="width: 100px; height: 100px; line-height: 200px" style="width: 100px; height: 100px; line-height: 200px"
/> />
<i <i
@ -24,15 +24,15 @@
</div> </div>
<el-dialog <el-dialog
:title="title" title="上传图片"
:visible.sync="openimg" :visible.sync="openimg"
width="800px" width="950px"
append-to-body append-to-body
@opened="modalOpened" @opened="modalOpened"
@close="closeDialog" @close="closeDialog"
> >
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{ height: '350px' }"> <el-col :xs="24" :md="0" :style="{ height: '350px' }">
<vue-cropper <vue-cropper
ref="cropper" ref="cropper"
:img="options.img" :img="options.img"
@ -47,7 +47,12 @@
</el-col> </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"> <div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" /> <img
style="width: 100%; height: 100%"
v-if="previews.url"
:src="previews.url"
/>
<div v-else></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -126,8 +131,8 @@ export default {
options: { options: {
img: null, //裁剪图片的地址 img: null, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框 autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度 autoCropWidth: 300, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度 autoCropHeight: 300, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变 fixedBox: true, // 固定截图框大小 不允许改变
}, },
previews: {}, previews: {},
@ -200,34 +205,34 @@ export default {
); );
} else { } else {
const reader = new FileReader(); const reader = new FileReader();
this.previews.data = file;
this.previews.url = URL.createObjectURL(file);
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = () => { reader.onload = () => {
this.options.img = reader.result; // this.options.img = reader.result;
}; };
} }
}, },
// 上传图片 // 上传图片
uploadImg() { uploadImg() {
// console.log(this.types); let formData = new FormData();
this.$refs.cropper.getCropBlob((data) => { formData.append("file", this.previews.data);
let formData = new FormData(); formData.append("type", this.types);
formData.append("file", data); updateNurseStationHeads(formData).then((response) => {
formData.append("type", this.types); this.options.img = baseurl + response.imgUrl;
updateNurseStationHeads(formData).then((response) => { this.$emit("imgUrl", response.imgUrl);
this.options.img = baseurl + response.imgUrl; console.log(this.items);
this.$emit("imgUrl", response.imgUrl); console.log(this.types);
console.log(this.items); if (this.types == "attributePitureUrl") {
console.log(this.types); this.items.attributePitureUrl = response.imgUrl;
if (this.types == "attributePitureUrl") { this.$emit("item", JSON.stringify(this.items));
this.items.attributePitureUrl = response.imgUrl; }
this.$emit("item", JSON.stringify(this.items)); this.openimg = false;
}
this.openimg = false;
});
}); });
}, },
// 实时预览 // 实时预览
realTime(data) { realTime(data) {
console.log(data);
this.previews = data; this.previews = data;
}, },
// 关闭窗口 // 关闭窗口
@ -239,6 +244,17 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.avatar-upload-preview {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width: 300px;
height: 300px;
border-radius: 0%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
.user-info-head { .user-info-head {
position: relative; position: relative;
display: inline-block; display: inline-block;