489 lines
18 KiB
Vue
489 lines
18 KiB
Vue
<template>
|
|
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
|
<el-form :inline="true" :model="form" label-width="90px">
|
|
<el-form-item label="筛选数据:">
|
|
<el-input
|
|
style="width: 100%"
|
|
v-model="form.searchValue"
|
|
clearable
|
|
placeholder="请输入筛选数据"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="资源类型:">
|
|
<el-select v-model="form.type" placeholder="请选择资源类型" style="width: 100%">
|
|
<el-option
|
|
v-for="item in typeList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="资源状态:">
|
|
<el-select v-model="form.state" placeholder="请选择资源状态" style="width: 100%">
|
|
<el-option
|
|
v-for="item in stateList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
|
<el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
stripe
|
|
:data="tableData"
|
|
highlight-current-row
|
|
border
|
|
header-cell-class-name="table_header"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
show-overflow-tooltip
|
|
prop="resourceName"
|
|
align="center"
|
|
label="资源名称"
|
|
width="180"
|
|
></el-table-column>
|
|
<el-table-column show-overflow-tooltip prop="uploadTime" align="center" label="上传时间"></el-table-column>
|
|
<el-table-column show-overflow-tooltip prop="updateTime" align="center" label="修改时间"></el-table-column>
|
|
<el-table-column show-overflow-tooltip prop="type" align="center" label="资源类型">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.type == 0 ? 'PDF' : '视屏' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column show-overflow-tooltip prop="state" align="center" label="资源状态">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.state == 0 ? '展示' : '不展示' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column show-overflow-tooltip prop="picUrl" align="center" label="封面">
|
|
<template slot-scope="scope">
|
|
<img class="imgs" style="height: 22px" :src="scope.row.picUrl" />
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column show-overflow-tooltip prop="name" align="center" label="操作" width="360px">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" size="mini" icon="el-icon-view" @click="look(scope.row)">查看</el-button>
|
|
<el-button type="primary" size="mini" icon="el-icon-edit" @click="modify(scope.row)">
|
|
修改
|
|
</el-button>
|
|
<el-button type="primary" size="mini" icon="el-icon-download" @click="download(scope.row)">
|
|
下载
|
|
</el-button>
|
|
<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteF(scope.row.id)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column show-overflow-tooltip prop="name" label="文件" width="180"> </el-table-column> -->
|
|
</el-table>
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:title="title"
|
|
:visible.sync="dialogVisible"
|
|
:before-close="handleClose"
|
|
width="30%"
|
|
style="margin-top: 15vh !important"
|
|
>
|
|
<el-form :model="formInline" ref="form" :rules="rules" class="formDialog" label-width="110px">
|
|
<el-form-item label="资源名称:" prop="name">
|
|
<el-input v-model="formInline.name" placeholder="资源名称"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="资源类型:" class="top" prop="type">
|
|
<el-select v-model="formInline.type" placeholder="资源类型" @change="changeType">
|
|
<el-option label="PDF" value="0"></el-option>
|
|
<el-option label="视频" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="资源状态:" class="top" prop="state">
|
|
<el-select v-model="formInline.state" placeholder="资源类型">
|
|
<el-option label="展示" value="0"></el-option>
|
|
<el-option label="不展示" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="资源封面:" class="top" prop="fileListImg">
|
|
<el-upload
|
|
class="upload-demo"
|
|
action="#"
|
|
:on-remove="beforeRemoveImg"
|
|
:http-request="uploadImg"
|
|
multiple
|
|
:limit="1"
|
|
:before-upload="handleBeforeUploadImg"
|
|
:on-exceed="handleExceedImg"
|
|
:file-list="fileListImg"
|
|
accept="[image/jpeg, image/png, image/jpg]"
|
|
>
|
|
<el-button size="small" type="primary">上传封面</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="资源文件:" class="top" prop="fileListImg">
|
|
<el-upload
|
|
class="upload-demo"
|
|
action="#"
|
|
:on-remove="beforeRemove"
|
|
:http-request="upload"
|
|
multiple
|
|
:limit="1"
|
|
:before-upload="handleBeforeUpload"
|
|
:on-exceed="handleExceed"
|
|
:file-list="fileList"
|
|
:accept="accept"
|
|
>
|
|
<el-button size="small" type="primary">选择文件</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" @click="determine">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:title="titleVideo"
|
|
:visible.sync="showvideo"
|
|
v-if="showvideo"
|
|
width="90%"
|
|
:append-to-body="true"
|
|
>
|
|
<!-- v-if="showvideo" -->
|
|
<video style="height: 85vh" controls="controls" autoplay :src="src" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { dicData } from '@/assets/commjs/dictypeData'
|
|
import { queryData, play, uploadFile, updateFile, deleteFile } from '@/api/center/DropEvent.js'
|
|
export default {
|
|
name: 'resourceDocument',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
rules: {
|
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
|
type: [{ required: true, message: '资源类型不能为空', trigger: 'blur' }],
|
|
state: [{ required: true, message: '资源状态不能为空', trigger: 'blur' }],
|
|
fileListImg: [{ required: true, message: '请选择文件', trigger: 'blur' }]
|
|
},
|
|
accept: '.pdf',
|
|
tableData: [],
|
|
formInline: {
|
|
type: '0',
|
|
name: '',
|
|
state: '1'
|
|
},
|
|
fileList: [],
|
|
fileListImg: [],
|
|
dialogVisible: false,
|
|
showvideo: false,
|
|
title: '',
|
|
loading: false,
|
|
form: {
|
|
state: '',
|
|
type: '',
|
|
searchValue: ''
|
|
},
|
|
src: '',
|
|
titleVideo: '',
|
|
stateList: [
|
|
{
|
|
value: '',
|
|
label: '全部'
|
|
},
|
|
{
|
|
value: '0',
|
|
label: '展示'
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '不展示'
|
|
}
|
|
],
|
|
typeList: [
|
|
{
|
|
value: '',
|
|
label: '全部'
|
|
},
|
|
{
|
|
value: '0',
|
|
label: 'PDF'
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '视频'
|
|
}
|
|
],
|
|
fileType: ['pdf']
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.setHeight()
|
|
window.addEventListener('resize', this.setHeight)
|
|
this.onSubmit()
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.vh = window.sessionStorage.getItem('appheight') - 250 + 'px'
|
|
},
|
|
// 表单重置
|
|
resetForm() {
|
|
if (this.$refs['form']) {
|
|
this.$refs['form'].resetFields()
|
|
}
|
|
},
|
|
// 查询
|
|
onSubmit() {
|
|
this.loading = true
|
|
queryData(this.form).then(res => {
|
|
this.tableData = res.data
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
// 新增数据
|
|
determine() {
|
|
if (this.formInline.name == '') {
|
|
return this.$message({
|
|
message: '请输入名称',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
if (this.fileList.length == 0) {
|
|
return this.$message({
|
|
message: '请上传文件',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
let form = new FormData()
|
|
form.append('name', this.formInline.name)
|
|
form.append('type', this.formInline.type)
|
|
form.append('state', this.formInline.state)
|
|
// form.append("picture",'');
|
|
|
|
if (this.fileList.length == 0 || this.fileList[0].url == '') {
|
|
form.append('multipartFile', '')
|
|
} else {
|
|
this.fileList.forEach(item => {
|
|
form.append('multipartFile', item)
|
|
})
|
|
}
|
|
if (this.fileListImg.length == 0 || this.fileListImg[0].url == '') {
|
|
form.append('picture', '')
|
|
} else {
|
|
this.fileListImg.forEach(item => {
|
|
form.append('picture', item)
|
|
})
|
|
}
|
|
if (this.title == '新增') {
|
|
uploadFile(form).then(res => {
|
|
if (res.code == 'A0000') {
|
|
this.$message({
|
|
message: res.message,
|
|
type: 'success'
|
|
})
|
|
this.onSubmit()
|
|
this.handleClose()
|
|
}
|
|
})
|
|
}
|
|
if (this.title == '修改') {
|
|
form.append('id', this.formInline.id)
|
|
updateFile(form).then(res => {
|
|
if (res.code == 'A0000') {
|
|
this.$message({
|
|
message: res.message,
|
|
type: 'success'
|
|
})
|
|
this.onSubmit()
|
|
this.handleClose()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// \取消
|
|
handleClose() {
|
|
;(this.formInline = {
|
|
type: '0',
|
|
name: '',
|
|
state: '1'
|
|
}),
|
|
(this.fileList = []),
|
|
(this.fileListImg = []),
|
|
(this.dialogVisible = false)
|
|
this.resetForm()
|
|
},
|
|
changeType(e) {
|
|
if (e == 0) {
|
|
this.accept = '.pdf'
|
|
this.fileType = ['pdf']
|
|
} else if (e == 1) {
|
|
this.accept = '.mp4'
|
|
this.fileType = ['mp4']
|
|
}
|
|
},
|
|
// 新增
|
|
add() {
|
|
this.formInline = {}
|
|
this.title = '新增'
|
|
this.dialogVisible = true
|
|
},
|
|
// 修改
|
|
modify(row) {
|
|
// this.formInline = row;
|
|
// this.formInline.name=row.resourceName
|
|
this.title = '修改'
|
|
|
|
this.dialogVisible = true
|
|
;(this.formInline = {
|
|
type: row.type + '',
|
|
name: row.resourceName,
|
|
state: row.state + '',
|
|
id: row.id
|
|
}),
|
|
this.changeType(row.type)((this.fileList = [{ name: row.fileName, url: '' }]))
|
|
this.fileListImg = [{ name: row.imgName, url: '' }]
|
|
},
|
|
// 删除
|
|
deleteF(e) {
|
|
deleteFile({ id: e }).then(res => {
|
|
if (res.code == 'A0000') {
|
|
this.$message({
|
|
message: res.message,
|
|
type: 'success'
|
|
})
|
|
this.onSubmit()
|
|
}
|
|
})
|
|
},
|
|
look(row) {
|
|
if (row.type == 0) {
|
|
window.open(row.resUrl)
|
|
} else if (row.type == 1) {
|
|
this.titleVideo = row.resourceName
|
|
play({
|
|
id: row.id
|
|
}).then(res => {
|
|
this.src = window.URL.createObjectURL(res)
|
|
this.showvideo = true
|
|
})
|
|
}
|
|
},
|
|
// 下载
|
|
download(row) {
|
|
play({
|
|
id: row.id
|
|
}).then(res => {
|
|
let blob = new Blob([res], {
|
|
type: row.type == 1 ? 'video/mp4' : 'application/pdf;chartset=UTF-8'
|
|
})
|
|
const url = window.URL.createObjectURL(blob)
|
|
const link = document.createElement('a') // 创建a标签
|
|
link.href = url // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
|
|
link.download = row.fileName // 设置下载的文件名
|
|
document.body.appendChild(link)
|
|
link.click() //执行下载
|
|
document.body.removeChild(link)
|
|
})
|
|
},
|
|
beforeRemove(file, fileList) {
|
|
this.fileList = []
|
|
},
|
|
beforeRemoveImg(file, fileList) {
|
|
this.fileListImg = []
|
|
},
|
|
upload(params) {
|
|
this.fileList.push(params.file)
|
|
},
|
|
uploadImg(params) {
|
|
this.fileListImg.push(params.file)
|
|
},
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(`只能上传1个文件`)
|
|
},
|
|
handleExceedImg(files, fileList) {
|
|
this.$message.warning(`只能上传1张封面`)
|
|
},
|
|
// 上传前校检格式和大小
|
|
handleBeforeUpload(file) {
|
|
// 校检文件类型
|
|
if (this.fileType) {
|
|
let fileExtension = ''
|
|
if (file.name.lastIndexOf('.') > -1) {
|
|
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
|
|
}
|
|
const isTypeOk = this.fileType.some(type => {
|
|
if (file.type.indexOf(type) > -1) return true
|
|
return !!(fileExtension && fileExtension.indexOf(type) > -1)
|
|
})
|
|
if (!isTypeOk) {
|
|
this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
|
|
return false
|
|
}
|
|
}
|
|
|
|
this.$message('正在上传文件，请稍候...')
|
|
|
|
return true
|
|
},
|
|
// 上传前校检格式和大小
|
|
handleBeforeUploadImg(file) {
|
|
// 校检文件类型
|
|
let fileType = ['image/jpeg', 'image/png', 'image/jpg']
|
|
if (fileType) {
|
|
let fileExtension = ''
|
|
if (file.name.lastIndexOf('.') > -1) {
|
|
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
|
|
}
|
|
const isTypeOk = fileType.some(type => {
|
|
if (file.type.indexOf(type) > -1) return true
|
|
return !!(fileExtension && fileExtension.indexOf(type) > -1)
|
|
})
|
|
if (!isTypeOk) {
|
|
this.$message.error(`文件格式不正确, 请上传${fileType.join('/')}格式文件!`)
|
|
return false
|
|
}
|
|
}
|
|
|
|
this.$message('正在上传文件，请稍候...')
|
|
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import url('../../../../styles/comStyle.less');
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
::v-deep .formDialog {
|
|
.el-form-item--mini.el-form-item,
|
|
.el-form-item--small.el-form-item {
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-dialog {
|
|
margin-top: 2% !important;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 10px;
|
|
max-height: none !important;
|
|
}
|
|
</style>
|