510 lines
18 KiB
Vue
510 lines
18 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
|
<el-form-item label="标题名称" prop="captionName">
|
|
<el-input v-model="queryParams.captionName" placeholder="请输入标题名称" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="类型" prop="type">
|
|
<el-select v-model="queryParams.type" @change="handleQuery">
|
|
<el-option value="" label="全部"></el-option>
|
|
<el-option value="0" label="公告通知"></el-option>
|
|
<el-option value="1" label="公司资讯"></el-option>
|
|
<el-option value="2" label="政策法规"></el-option>
|
|
<el-option value="3" label="行业动态"></el-option>
|
|
<el-option value="4" label="投资者"></el-option>
|
|
<el-option value="5" label="公司治理"></el-option>
|
|
<!-- <el-option value="6" label="投资者关系"></el-option> -->
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="发布时间" prop="releaseTime">
|
|
<el-date-picker clearable v-model="queryParams.releaseTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择发布时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="集团名称" prop="groupName">
|
|
<el-input v-model="queryParams.groupName" placeholder="请输入集团名称" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="摘要" prop="abstracts">
|
|
<el-input v-model="queryParams.abstracts" placeholder="请输入摘要" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['official:slideshow:add']">新增</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['official:slideshow:edit']">修改</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['official:slideshow:remove']">删除</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['official:slideshow:export']">导出</el-button>
|
|
</el-col>
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
</el-row>
|
|
|
|
<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">
|
|
<template slot-scope="{ row }">
|
|
<img :src="row.cover" 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="type" :formatter="(row, column, cellValue, index) => ['公告通知', '公司资讯', '政策法规', '行业动态', '投资者', '公司治理'][cellValue]" />
|
|
<el-table-column label="发布时间" align="center" prop="releaseTime" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d}') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="集团名称" align="center" prop="groupName" />
|
|
<el-table-column label="新闻内容" align="center" prop="newsContent">
|
|
<template slot-scope="{ row }">
|
|
<div class="multiple-line-content-show" v-html="row.newsContent"></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="摘要" align="center" prop="abstracts" />
|
|
<el-table-column label="是否置顶" align="center" prop="isTop" :formatter="(row, column, cellValue, index) => ['否', '是'][cellValue || '0']" />
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['official:slideshow:edit']">修改</el-button>
|
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['official:slideshow:remove']">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
|
|
<!-- 添加或修改新闻信息对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" class="showAll_dialog" width="1520px" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="标题名称" prop="captionName">
|
|
<el-input v-model="form.captionName" placeholder="请输入标题名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="摘要" prop="abstracts">
|
|
<el-input v-model="form.abstracts" placeholder="请输入摘要" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="18">
|
|
<el-form-item label="类型" prop="type">
|
|
<el-radio-group v-model="form.type">
|
|
<el-radio label="0">公告通知</el-radio>
|
|
<el-radio label="1">公司资讯</el-radio>
|
|
<el-radio label="2">政策法规</el-radio>
|
|
<el-radio label="3">行业动态</el-radio>
|
|
<el-radio label="4">投资者</el-radio>
|
|
<el-radio label="5">公司治理</el-radio>
|
|
<!-- <el-radio label="6">投资者关系</el-radio> -->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="排序" prop="orderBy">
|
|
<el-input-number v-model="form.orderBy" placeholder="请输入排序"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<template v-if="form.type != '5'">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<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="6">
|
|
<el-form-item label="集团名称" prop="groupName">
|
|
<el-input v-model="form.groupName" placeholder="请输入集团名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<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="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="388" />
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-form-item label="附件">
|
|
<el-upload class="upload-demo" drag :headers="headers" :action="uploadFileUrl" :limit='limit' :before-upload="handleBeforeUpload" :file-list="fileList" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-remove="handleDeleteFile" ref="fileUpload">
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listSlideshow,
|
|
getSlideshow,
|
|
delSlideshow,
|
|
addSlideshow,
|
|
updateSlideshow
|
|
} from '@/api/official/slideshow'
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
export default {
|
|
name: 'Slideshow',
|
|
data() {
|
|
return {
|
|
// 大小限制(MB)
|
|
fileSize: 10,
|
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
fileType: [
|
|
'png',
|
|
'jpg',
|
|
'doc',
|
|
'docx',
|
|
'xls',
|
|
'xlsx',
|
|
'ppt',
|
|
'txt',
|
|
'pdf'
|
|
],
|
|
number: 0,
|
|
limit: 1,
|
|
uploadList: [],
|
|
// 上传文件服务器地址
|
|
uploadFileUrl:
|
|
process.env.VUE_APP_API_TARGET_URL + 'system/oss/addPartsUpload',
|
|
headers: { Authorization: 'Bearer ' + getToken() },
|
|
fileList: [],
|
|
loadingModal: undefined,
|
|
// 按钮loading
|
|
buttonLoading: false,
|
|
// 遮罩层
|
|
loading: true,
|
|
// 选中数组
|
|
ids: [],
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
// 总条数
|
|
total: 0,
|
|
// 新闻信息表格数据
|
|
slideshowList: [],
|
|
// 弹出层标题
|
|
title: '',
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
cover: undefined,
|
|
captionName: undefined,
|
|
releaseTime: undefined,
|
|
groupName: undefined,
|
|
newsContent: undefined,
|
|
abstracts: undefined,
|
|
isTop: undefined,
|
|
type: ''
|
|
},
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
|
|
cover: [{ required: true, message: '封面不能为空', trigger: 'blur' }],
|
|
captionName: [
|
|
{ required: true, message: '标题名称不能为空', trigger: 'blur' }
|
|
],
|
|
releaseTime: [
|
|
{ required: true, message: '发布时间不能为空', trigger: 'blur' }
|
|
],
|
|
groupName: [
|
|
{ required: true, message: '集团名称不能为空', trigger: 'blur' }
|
|
],
|
|
newsContent: [
|
|
{ required: true, message: '新闻内容不能为空', trigger: 'blur' }
|
|
],
|
|
abstracts: [
|
|
{ required: true, message: '摘要不能为空', trigger: 'blur' }
|
|
],
|
|
isTop: [
|
|
{ required: true, message: '是否置顶不能为空', trigger: 'blur' }
|
|
],
|
|
type: [{ required: true, message: '类型不能为空', trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
/** 查询新闻信息
|
|
列表 */
|
|
getList() {
|
|
this.loading = true
|
|
listSlideshow(this.queryParams).then(response => {
|
|
this.slideshowList = response.rows
|
|
this.total = response.total
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false
|
|
this.reset()
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
id: undefined,
|
|
cover: '',
|
|
captionName: undefined,
|
|
releaseTime: undefined,
|
|
groupName: undefined,
|
|
newsContent: undefined,
|
|
abstracts: undefined,
|
|
isTop: '0',
|
|
type: '1',
|
|
createBy: undefined,
|
|
createUserId: undefined,
|
|
createTime: undefined,
|
|
updateBy: undefined,
|
|
updateUserId: undefined,
|
|
updateTime: undefined
|
|
}
|
|
this.resetForm('form')
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1
|
|
this.getList()
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm('queryForm')
|
|
this.handleQuery()
|
|
},
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map(item => item.id)
|
|
this.single = selection.length !== 1
|
|
this.multiple = !selection.length
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd() {
|
|
this.reset()
|
|
this.fileList = []
|
|
this.open = true
|
|
this.title = '添加新闻信息'
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
this.loading = true
|
|
this.reset()
|
|
const id = row.id || this.ids
|
|
getSlideshow(id).then(response => {
|
|
this.loading = false
|
|
this.form = response.data
|
|
this.open = true
|
|
this.title = '修改新闻信息'
|
|
if (this.form.type == '5') {
|
|
this.fileList = this.form.cover
|
|
? [
|
|
{
|
|
url: this.form.cover,
|
|
name: this.getFileName(this.form.cover)
|
|
}
|
|
]
|
|
: []
|
|
}
|
|
})
|
|
},
|
|
// 获取文件名称
|
|
getFileName(name) {
|
|
// 如果是url那么取最后的名字 如果不是直接返回
|
|
if (name.lastIndexOf('/') > -1) {
|
|
return name.slice(name.lastIndexOf('/') + 1)
|
|
} else {
|
|
return name
|
|
}
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
this.$refs['form'].validate(valid => {
|
|
if (valid) {
|
|
this.buttonLoading = true
|
|
if (this.form.id != null) {
|
|
updateSlideshow(this.form)
|
|
.then(response => {
|
|
this.$modal.msgSuccess('修改成功')
|
|
this.open = false
|
|
this.getList()
|
|
})
|
|
.finally(() => {
|
|
this.buttonLoading = false
|
|
})
|
|
} else {
|
|
addSlideshow(this.form)
|
|
.then(response => {
|
|
this.$modal.msgSuccess('新增成功')
|
|
this.open = false
|
|
this.getList()
|
|
})
|
|
.finally(() => {
|
|
this.buttonLoading = false
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
const ids = row.id || this.ids
|
|
this.$modal
|
|
.confirm('是否确认删除新闻信息编号为"' + ids + '"的数据项？')
|
|
.then(() => {
|
|
this.loading = true
|
|
return delSlideshow(ids)
|
|
})
|
|
.then(() => {
|
|
this.loading = false
|
|
this.getList()
|
|
this.$modal.msgSuccess('删除成功')
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.download(
|
|
'official/slideshow/export',
|
|
{
|
|
...this.queryParams
|
|
},
|
|
`slideshow_${new Date().getTime()}.xlsx`
|
|
)
|
|
},
|
|
// 上传前校检格式和大小
|
|
handleBeforeUpload(file) {
|
|
// 校检文件类型
|
|
if (this.fileType) {
|
|
const fileName = file.name.split('.')
|
|
const fileExt = fileName[fileName.length - 1]
|
|
const isTypeOk = this.fileType.indexOf(fileExt) >= 0
|
|
if (!isTypeOk) {
|
|
this.$message.error(
|
|
`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`
|
|
)
|
|
return false
|
|
}
|
|
}
|
|
// 校检文件大小
|
|
if (this.fileSize) {
|
|
const isLt = file.size / 1024 / 1024 < this.fileSize
|
|
if (!isLt) {
|
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
|
|
return false
|
|
}
|
|
}
|
|
this.loadingModal = this.$loading({
|
|
lock: true,
|
|
text: '正在上传文件，请稍候...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
this.number++
|
|
return true
|
|
},
|
|
// 文件个数超出
|
|
handleExceed() {
|
|
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`)
|
|
},
|
|
// 上传失败
|
|
handleUploadError(err) {
|
|
this.$message.error(`上传文件失败，请重试`)
|
|
this.loadingModal.close()
|
|
},
|
|
// 上传成功回调
|
|
handleUploadSuccess(res, file) {
|
|
if (res.code === 200) {
|
|
this.uploadList.push({
|
|
name: res.data.fileName,
|
|
url: res.data.url,
|
|
ossId: res.data.ossId
|
|
})
|
|
;(this.form.cover = res.data.url), this.uploadedSuccessfully()
|
|
} else {
|
|
this.number--
|
|
this.loadingModal.close()
|
|
this.$message.error(res.msg)
|
|
this.$refs.fileUpload.handleRemove(file)
|
|
this.uploadedSuccessfully()
|
|
}
|
|
},
|
|
// 删除文件
|
|
handleDeleteFile(index) {
|
|
// let ossId = this.fileList[index].ossId
|
|
// delOss(ossId)
|
|
this.fileList.splice(index, 1)
|
|
this.form.cover = null
|
|
},
|
|
// 上传结束处理
|
|
uploadedSuccessfully() {
|
|
if (this.number > 0 && this.uploadList.length === this.number) {
|
|
this.fileList = this.fileList.concat(this.uploadList)
|
|
this.uploadList = []
|
|
this.number = 0
|
|
this.loadingModal.close()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .multiple-line-content-show p {
|
|
margin: 0;
|
|
}
|
|
// 修改对话框高度
|
|
::v-deep .el-dialog {
|
|
height: 92%;
|
|
overflow: hidden;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 30px 20px 0;
|
|
height: 89%;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|