新闻信息配置封面上传
This commit is contained in:
parent
b956dfd47d
commit
b23367b873
|
|
@ -5,7 +5,9 @@ VUE_APP_TITLE = 官网后台管理系统
|
|||
ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
VUE_APP_API_TARGET_URL = 'http://47.121.27.78:8080/'
|
||||
VUE_APP_IMAGE_PREVIEW_API = '/imagePreview/upload'
|
||||
|
||||
# 应用访问路径 例如使用前缀 /admin/
|
||||
VUE_APP_CONTEXT_PATH = '/'
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken()
|
||||
},
|
||||
|
|
@ -176,7 +176,7 @@ export default {
|
|||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片 res.url为服务器返回的图片地址
|
||||
quill.insertEmbed(length, "image", res.data.url);
|
||||
quill.insertEmbed(length, "image", this.$imagePreviewApi + '/' + res.data.url.split('/').pop());
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
} else {
|
||||
|
|
|
|||
17
ruoyi-ui/src/components/FragmentUpload/index.vue
Normal file
17
ruoyi-ui/src/components/FragmentUpload/index.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-upload>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,21 +1,25 @@
|
|||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
multiple
|
||||
:action="uploadImgUrl"
|
||||
list-type="picture-card"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
ref="imageUpload"
|
||||
:on-remove="handleDelete"
|
||||
:show-file-list="true"
|
||||
:headers="headers"
|
||||
list-type="picture-card"
|
||||
|
||||
:multiple="multipleUpload"
|
||||
:limit="limit"
|
||||
:on-exceed="handleExceed"
|
||||
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-error="handleUploadError"
|
||||
|
||||
:show-file-list="true"
|
||||
:file-list="fileList"
|
||||
:on-remove="handleDelete"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:class="{hide: this.fileList.length >= this.limit}"
|
||||
|
||||
ref="imageUpload"
|
||||
:class="{ hide: fileList.length >= this.limit }"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
|
|
@ -23,9 +27,10 @@
|
|||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="limit"> 至多 <b style="color: #f56c6c">{{ limit }}</b> 张 </template>
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
的图片
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
|
|
@ -44,172 +49,100 @@
|
|||
|
||||
<script>
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { listByIds, delOss } from "@/api/system/oss";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: [String, Object, Array],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["png", "jpg", "jpeg"],
|
||||
},
|
||||
// 图片地址 url1,url2,...
|
||||
value: String,
|
||||
// 是否允许同时上传多个文件
|
||||
multipleUpload: { type: Boolean, default: false },
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
isShowTip: { type: Boolean, default: true },
|
||||
// 图片数量限制
|
||||
limit: { type: Number, default: 5 },
|
||||
// 大小限制(MB)
|
||||
fileSize: { type: Number, default: 5 },
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: { type: Array, default: () => ["png", "jpg", "jpeg"] },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
number: 0,
|
||||
uploadList: [],
|
||||
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
hideUpload: false,
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/addPartsUpload", // 上传的图片服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
fileList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
async handler(val) {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
let list;
|
||||
if (Array.isArray(val)) {
|
||||
list = val;
|
||||
} else {
|
||||
await listByIds(val).then(res => {
|
||||
list = res.data;
|
||||
})
|
||||
}
|
||||
// 然后将数组转为对象数组
|
||||
this.fileList = list.map(item => {
|
||||
// 此处name使用ossId 防止删除出现重名
|
||||
item = { name: item.ossId, url: item.url, ossId: item.ossId };
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.fileList = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fileList () {
|
||||
return (this.value ? this.value.split(',') : []).map(url => {
|
||||
return {
|
||||
url: process.env.VUE_APP_IMAGE_PREVIEW_API + '/' + url.split('/').pop(),
|
||||
name: url,
|
||||
};
|
||||
});
|
||||
},
|
||||
// 是否显示提示
|
||||
showTip() {
|
||||
return this.isShowTip && (this.fileType || this.fileSize);
|
||||
return this.isShowTip && (this.limit || this.fileType || this.fileSize);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 上传前loading加载
|
||||
handleBeforeUpload(file) {
|
||||
let isImg = false;
|
||||
if (this.fileType.length) {
|
||||
let fileExtension = "";
|
||||
if (file.name.lastIndexOf(".") > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||
}
|
||||
isImg = this.fileType.some((type) => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
isImg = file.type.indexOf("image") > -1;
|
||||
}
|
||||
|
||||
if (!isImg) {
|
||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
|
||||
return false;
|
||||
}
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.$modal.loading("正在上传图片，请稍候...");
|
||||
this.number++;
|
||||
},
|
||||
// 文件个数超出
|
||||
handleExceed() {
|
||||
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||
},
|
||||
// 上传成功回调
|
||||
handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
|
||||
this.uploadedSuccessfully();
|
||||
} else {
|
||||
this.number--;
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError(res.msg);
|
||||
this.$refs.imageUpload.handleRemove(file);
|
||||
this.uploadedSuccessfully();
|
||||
|
||||
// 上传前的校验
|
||||
handleBeforeUpload(file) {
|
||||
// 校验文件格式
|
||||
let isImg = file.type.includes("image");
|
||||
if (this.fileType.length) {
|
||||
let fileExtension = file.name.includes('.') ? file.name.split('.').pop() : '';
|
||||
isImg = this.fileType.some((type) => fileExtension.includes(type) || file.type.includes(type));
|
||||
}
|
||||
if (!isImg) {
|
||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
|
||||
return false;
|
||||
}
|
||||
// 校验文件大小
|
||||
if (this.fileSize && file.size / 1024 / 1024 > this.fileSize) {
|
||||
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
this.$modal.loading("正在上传图片，请稍候...");
|
||||
},
|
||||
// 删除图片
|
||||
handleDelete(file) {
|
||||
const findex = this.fileList.map(f => f.name).indexOf(file.name);
|
||||
if(findex > -1) {
|
||||
let ossId = this.fileList[findex].ossId;
|
||||
delOss(ossId);
|
||||
this.fileList.splice(findex, 1);
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
// 上传成功回调
|
||||
handleUploadSuccess(res) {
|
||||
if (res.code === 200) {
|
||||
this.$emit('input', (this.value || '') + (this.value ? ',' : '') + res.data.url);
|
||||
} else {
|
||||
this.$modal.msgError(res.msg);
|
||||
}
|
||||
this.$modal.closeLoading();
|
||||
},
|
||||
// 上传失败
|
||||
handleUploadError(res) {
|
||||
this.$modal.msgError("上传图片失败，请重试");
|
||||
this.$modal.closeLoading();
|
||||
},
|
||||
// 上传结束处理
|
||||
uploadedSuccessfully() {
|
||||
if (this.number > 0 && this.uploadList.length === this.number) {
|
||||
this.fileList = this.fileList.concat(this.uploadList);
|
||||
this.uploadList = [];
|
||||
this.number = 0;
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
this.$modal.closeLoading();
|
||||
}
|
||||
|
||||
// 删除图片
|
||||
handleDelete(file) {
|
||||
const current = this.value.split(',');
|
||||
const targetIndex = current.findIndex(f => f === file.name);
|
||||
current.splice(targetIndex, 1);
|
||||
this.$emit('input', current.join(','));
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 对象转成指定字符串分隔
|
||||
listToString(list, separator) {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
for (let i in list) {
|
||||
if (list[i].ossId) {
|
||||
strs += list[i].ossId + separator;
|
||||
}
|
||||
}
|
||||
return strs != "" ? strs.substr(0, strs.length - 1) : "";
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@ import FileUpload from "@/components/FileUpload"
|
|||
// 图片上传组件
|
||||
import ImageUpload from "@/components/ImageUpload"
|
||||
|
||||
// 分片上传
|
||||
import FragmentUpload from "@/components/FragmentUpload"
|
||||
// 本地图片上传组件
|
||||
import ImageUploadLoca from "@/components/ImageUploadLochost"
|
||||
// 图片预览组件
|
||||
|
|
@ -42,6 +44,9 @@ import VueMeta from 'vue-meta'
|
|||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
|
||||
// 全局属性挂载
|
||||
Vue.prototype.$imagePreviewApi = process.env.VUE_APP_IMAGE_PREVIEW_API
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
Vue.prototype.getConfigKey = getConfigKey
|
||||
|
|
@ -63,6 +68,7 @@ Vue.component('FileUpload', FileUpload)
|
|||
Vue.component('ImageUploadLochost', ImageUploadLoca)
|
||||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
Vue.component('FragmentUpload', FragmentUpload)
|
||||
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
|
|
|
|||
|
|
@ -90,7 +90,11 @@
|
|||
<el-table v-loading="loading" :data="slideshowList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键id" align="center" prop="id" v-if="false"/>
|
||||
<el-table-column label="封面" align="center" prop="cover" />
|
||||
<el-table-column label="封面" align="center" prop="cover">
|
||||
<template slot-scope="{ row }">
|
||||
<img :src="$imagePreviewApi + '/' + row.cover.split('/').pop()" alt="" style="width:50px;height:50px;object-fit:cover;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标题名称" align="center" prop="captionName" />
|
||||
<el-table-column label="发布时间" align="center" prop="releaseTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -98,9 +102,13 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="集团名称" align="center" prop="groupName" />
|
||||
<el-table-column label="新闻内容" align="center" prop="newsContent" />
|
||||
<el-table-column label="新闻内容" align="center" prop="newsContent">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="news-content-show" v-html="row.newsContent"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="摘要" align="center" prop="abstracts" />
|
||||
<el-table-column label="是否置顶 0：否 1：是" align="center" prop="isTop" />
|
||||
<el-table-column label="是否置顶" align="center" prop="isTop" :formatter="(row, column, cellValue, index) => ['否', '是'][cellValue || '0']" />
|
||||
<el-table-column label="创建者id" align="center" prop="createUserId" />
|
||||
<el-table-column label="更新者id" align="center" prop="updateUserId" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
|
|
@ -131,35 +139,43 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改新闻信息
|
||||
对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<!-- 添加或修改新闻信息对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="封面" prop="cover">
|
||||
<el-input v-model="form.cover" placeholder="请输入封面" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题名称" prop="captionName">
|
||||
<el-input v-model="form.captionName" placeholder="请输入标题名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发布时间" prop="releaseTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.releaseTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择发布时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发布时间" prop="releaseTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.releaseTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择发布时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否置顶" prop="isTop">
|
||||
<el-radio-group v-model="form.isTop">
|
||||
<el-radio label="0">否</el-radio>
|
||||
<el-radio label="1">是</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="集团名称" prop="groupName">
|
||||
<el-input v-model="form.groupName" placeholder="请输入集团名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻内容">
|
||||
<editor v-model="form.newsContent" :min-height="192"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="abstracts">
|
||||
<el-input v-model="form.abstracts" placeholder="请输入摘要" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否置顶 0：否 1：是" prop="isTop">
|
||||
<el-input v-model="form.isTop" placeholder="请输入是否置顶 0：否 1：是" />
|
||||
<el-form-item label="封面" prop="cover">
|
||||
<ImageUploadLochost v-model="form.cover" :limit="1" :fileSize="10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻内容" prop="newsContent">
|
||||
<editor v-model="form.newsContent" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -263,13 +279,13 @@ export default {
|
|||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
cover: undefined,
|
||||
cover: '',
|
||||
captionName: undefined,
|
||||
releaseTime: undefined,
|
||||
groupName: undefined,
|
||||
newsContent: undefined,
|
||||
abstracts: undefined,
|
||||
isTop: undefined,
|
||||
isTop: '0',
|
||||
createBy: undefined,
|
||||
createUserId: undefined,
|
||||
createTime: undefined,
|
||||
|
|
@ -362,3 +378,16 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.news-content-show {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
::v-deep .news-content-show p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,19 @@ module.exports = {
|
|||
proxy: {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://localhost:8081`,
|
||||
target: process.env.VUE_APP_API_TARGET_URL,
|
||||
changeOrigin: true,
|
||||
// pathRewrite: {
|
||||
// ['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
// }
|
||||
},
|
||||
'/imagePreview': {
|
||||
target: 'http://47.121.27.78:8008',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
}
|
||||
'^/imagePreview': '',
|
||||
},
|
||||
},
|
||||
},
|
||||
disableHostCheck: true
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user