修改
This commit is contained in:
曹辉
parent
1c93de85bb
commit
2ace214334
@ -9,8 +9,16 @@ export function updateNurseStationHeads(data) {
|
||||
})
|
||||
}
|
||||
|
||||
//海报视频上传
|
||||
|
||||
|
||||
export function updatePoserHeads(data) {
|
||||
return request({
|
||||
url: '/system/poser/updatePoserHeads',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function posts(data) {
|
||||
return request({
|
||||
|
||||
@ -762,11 +762,9 @@ export default {
|
||||
getListBy(this.queryParams).then(res => {
|
||||
this.nurseStationlist = res.rows;
|
||||
this.queryParams.nurseStationId = res.rows[0].id;
|
||||
this.nurseItemquery.nurseStationId = JSON.parse(
|
||||
JSON.stringify(res.rows[0].id)
|
||||
);
|
||||
this.nurseItemquery.nurseStationId = res.rows[0].id;
|
||||
this.getList();
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
//打开护理站列表
|
||||
nurseStationshowclick() {
|
||||
@ -794,7 +792,7 @@ export default {
|
||||
}
|
||||
this.form.nurseItemName = null;
|
||||
this.form.nurseItemId = null;
|
||||
this.nurseitemid = null
|
||||
this.nurseitemid = null;
|
||||
this.nurseStationshow = false;
|
||||
this.nurseItemnuser = item.id;
|
||||
this.nurseItemquery.nurseStationId = item.id;
|
||||
|
||||
@ -2,9 +2,18 @@
|
||||
<div>
|
||||
<div
|
||||
class="user-info-head"
|
||||
:class="video.VideoPath ? 'wihi' : ''"
|
||||
@click="editCropper()"
|
||||
style="width: 100px; height: 100px"
|
||||
>
|
||||
<video
|
||||
style="width: 208px; height: 208px"
|
||||
v-if="video.VideoPath"
|
||||
v-bind:src="video.VideoPath"
|
||||
class="avatar video-avatar"
|
||||
controls="controls"
|
||||
>
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
<img
|
||||
v-if="options.img"
|
||||
v-bind:src="options.img"
|
||||
@ -12,7 +21,7 @@
|
||||
style="width: 100px; height: 100px; line-height: 200px"
|
||||
/>
|
||||
<i
|
||||
v-else
|
||||
v-else-if="!options.img && !video.VideoPath"
|
||||
class="el-icon-plus avatar-uploader-icon"
|
||||
style="
|
||||
position: absolute;
|
||||
@ -24,7 +33,7 @@
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
title="上传图片"
|
||||
:title="title"
|
||||
:visible.sync="openimg"
|
||||
width="950px"
|
||||
append-to-body
|
||||
@ -47,6 +56,15 @@
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<div class="avatar-upload-preview">
|
||||
<video
|
||||
style="width: 100%; height: 100%"
|
||||
v-if="videoForm.showVideoPath"
|
||||
v-bind:src="videoForm.showVideoPath"
|
||||
class="avatar video-avatar"
|
||||
controls="controls"
|
||||
>
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
v-if="previews.url"
|
||||
@ -54,6 +72,9 @@
|
||||
/>
|
||||
<div v-else></div>
|
||||
</div>
|
||||
<div class="title" v-if="types != 'posterVideoUrl'&&types!='posterPictureUrl'">
|
||||
请上传图片为800x800px的正方形
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
@ -71,7 +92,7 @@
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 2 }" :md="2">
|
||||
<!-- <el-col :lg="{ span: 1, offset: 2 }" :md="2">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
size="small"
|
||||
@ -98,8 +119,8 @@
|
||||
size="small"
|
||||
@click="rotateRight()"
|
||||
></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 2, offset: 6 }" :md="2">
|
||||
</el-col> -->
|
||||
<el-col :lg="{ span: 2, offset: 20 }" :md="2">
|
||||
<el-button type="primary" size="small" @click="uploadImg()"
|
||||
>提 交</el-button
|
||||
>
|
||||
@ -112,12 +133,16 @@
|
||||
<script>
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import baseurl from "@/api/baseurl.js";
|
||||
import { updateNurseStationHeads, posts } from "@/api/system/stationAvatar.js";
|
||||
import {
|
||||
updateNurseStationHeads,
|
||||
posts,
|
||||
updatePoserHeads,
|
||||
} from "@/api/system/stationAvatar.js";
|
||||
|
||||
export default {
|
||||
components: { VueCropper },
|
||||
|
||||
props: ["img", "type", "item"],
|
||||
props: ["img", "type", "item", "tovideo"],
|
||||
data() {
|
||||
return {
|
||||
imageUrl: "",
|
||||
@ -127,7 +152,7 @@ export default {
|
||||
// 是否显示cropper
|
||||
visible: false,
|
||||
// 弹出层标题
|
||||
title: "上传头像",
|
||||
title: "上传图片/视频",
|
||||
options: {
|
||||
img: null, //裁剪图片的地址
|
||||
autoCrop: true, // 是否默认生成截图框
|
||||
@ -137,11 +162,26 @@ export default {
|
||||
},
|
||||
previews: {},
|
||||
items: {},
|
||||
//显示上传按钮
|
||||
videoForm: {
|
||||
showVideoPath: null, //回显的变量
|
||||
},
|
||||
video: {
|
||||
VideoPath: null, //回显的变量
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.types = this.type;
|
||||
this.items = this.item;
|
||||
if (this.tovideo == null) {
|
||||
this.video.VideoPath = null;
|
||||
} else if (this.tovideo == "") {
|
||||
this.video.VideoPath = null;
|
||||
} else {
|
||||
this.video.VideoPath = baseurl + this.tovideo;
|
||||
}
|
||||
console.log(this.video);
|
||||
if (this.img == null) {
|
||||
this.options.img = null;
|
||||
} else if (this.img == "") {
|
||||
@ -149,8 +189,16 @@ export default {
|
||||
} else {
|
||||
this.options.img = baseurl + this.img;
|
||||
}
|
||||
if (this.types == "posterVideoUrl") {
|
||||
this.title = "上传视频";
|
||||
} else {
|
||||
this.title = "上传图片";
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tovideo: {
|
||||
handler(newimg, oldimg) {},
|
||||
},
|
||||
item: {
|
||||
handler(newimg, oldimg) {
|
||||
this.items = this.item;
|
||||
@ -199,48 +247,72 @@ export default {
|
||||
},
|
||||
// 上传预处理
|
||||
beforeUpload(file) {
|
||||
if (file.type.indexOf("image/") == -1) {
|
||||
this.$modal.msgError(
|
||||
"文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。"
|
||||
);
|
||||
} else {
|
||||
if (this.types == "posterVideoUrl") {
|
||||
const reader = new FileReader();
|
||||
this.previews.data = file;
|
||||
this.previews.url = URL.createObjectURL(file);
|
||||
this.videoForm.showVideoPath = URL.createObjectURL(file);
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
// this.options.img = reader.result;
|
||||
};
|
||||
} else {
|
||||
if (file.type.indexOf("image/") == -1) {
|
||||
this.$modal.msgError(
|
||||
"文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。"
|
||||
);
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
this.previews.data = file;
|
||||
this.previews.url = URL.createObjectURL(file);
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
// this.options.img = reader.result;
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传图片
|
||||
uploadImg() {
|
||||
let formData = new FormData();
|
||||
formData.append("file", this.previews.data);
|
||||
formData.append("type", this.types);
|
||||
updateNurseStationHeads(formData).then((response) => {
|
||||
this.options.img = baseurl + response.imgUrl;
|
||||
this.$emit("imgUrl", response.imgUrl);
|
||||
console.log(this.items);
|
||||
console.log(this.types);
|
||||
if (this.types == "attributePitureUrl") {
|
||||
this.items.attributePitureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
}
|
||||
if (this.types == "nurseItemClassifyUrl") {
|
||||
this.items.classifyPictureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
}
|
||||
if (this.types == "nurseStationClassifyUrl") {
|
||||
this.items.classifyPictureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
if (this.previews.data) {
|
||||
formData.append("file", this.previews.data);
|
||||
formData.append("type", this.types);
|
||||
if (this.types == "posterVideoUrl") {
|
||||
updatePoserHeads(formData).then((response) => {
|
||||
this.video.VideoPath = baseurl + response.imgUrl;
|
||||
this.$emit("imgUrl", response.imgUrl);
|
||||
this.openimg = false;
|
||||
});
|
||||
} else {
|
||||
updateNurseStationHeads(formData).then((response) => {
|
||||
this.options.img = baseurl + response.imgUrl;
|
||||
this.$emit("imgUrl", response.imgUrl);
|
||||
if (this.types == "attributePitureUrl") {
|
||||
this.items.attributePitureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
}
|
||||
if (this.types == "nurseItemClassifyUrl") {
|
||||
this.items.classifyPictureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
}
|
||||
if (this.types == "nurseStationClassifyUrl") {
|
||||
this.items.classifyPictureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
}
|
||||
if (this.types == "posterPictureUrl") {
|
||||
this.items.posterPictureUrl = response.imgUrl;
|
||||
this.$emit("item", JSON.stringify(this.items));
|
||||
}
|
||||
this.openimg = false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.openimg = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 实时预览
|
||||
realTime(data) {
|
||||
console.log(data);
|
||||
this.previews = data;
|
||||
},
|
||||
// 关闭窗口
|
||||
@ -252,6 +324,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
@ -266,8 +344,9 @@ export default {
|
||||
.user-info-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 120px;
|
||||
background: #fafafa;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.user-info-head:hover:after {
|
||||
@ -287,4 +366,12 @@ export default {
|
||||
line-height: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
.wihi {
|
||||
background-color: #fff;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.wihi:hover:after {
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user