<template>
|
|
<VolBox
|
v-model="model"
|
title="封面图片设置"
|
:height="230"
|
:width="520"
|
:lazy="true"
|
:padding="15"
|
>
|
<VolUpload
|
style="text-align: center; border: 1px dotted #FF9800;padding: 20px;"
|
:autoUpload="false"
|
:multiple="true"
|
:url="url"
|
:max-file="3"
|
:img="true"
|
:fileInfo="fileInfo"
|
:upload-after="uploadAfter"
|
>
|
<div>可选择1-3张图片设置为封面图</div>
|
</VolUpload>
|
</VolBox>
|
</template>
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
import {defineComponent,defineAsyncComponent,ref} from "vue"
|
export default defineComponent({
|
data() {
|
return {
|
url: "api/app_news/upload",
|
fileInfo: [],
|
model: false,
|
};
|
},
|
components: {
|
VolBox: VolBox,
|
VolUpload:defineAsyncComponent( () => import("@/components/basic/VolUpload.vue"))
|
},
|
methods: {
|
open(fileInfo) {
|
this.model = true;
|
this.fileInfo = fileInfo;
|
},
|
//封面图片上传完成后，将图片的路径更新到表中
|
uploadAfter(result, files) {
|
if (!result.status) {
|
return true;
|
}
|
//上传完成后，保存每个图片所存储的文件路径
|
let fileUrls = files.map((x) => {
|
//2021.09.25修复示例上传路径逻辑错误的问题
|
if (x.path) {
|
return x.path;
|
}
|
return result.data + x.name;
|
});
|
let data = { imageUrl: fileUrls.join(",") };
|
//父组件vue对象(查询界面)
|
let $parentVue;
|
//获取父组件当前选中行的id用于后台更新
|
this.$emit("parentCall", ($vue) => {
|
$parentVue = $vue;
|
data.Id = $vue.getSelectRows()[0].Id;
|
});
|
this.http
|
.post("api/news/setCover", data, "正在设置图片封面")
|
.then((x) => {
|
//刷新查询界面table
|
$parentVue.refresh();
|
this.model = false;
|
});
|
return true;
|
},
|
}
|
});
|
</script>
|
