775 lines
21 KiB
Vue
775 lines
21 KiB
Vue
<template>
|
||
<div class="content-height report-list">
|
||
<div class="title">
|
||
<span>报告查询</span>
|
||
</div>
|
||
<div class="tag-search">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<div class="tag-item">
|
||
<label class="tag-title">全文检索:</label>
|
||
<el-input v-model="q.keyContent" placeholder="请输入搜索词"></el-input>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="tag-item">
|
||
<label class="tag-title">报告年份：</label>
|
||
<el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
|
||
<template v-for="item in yearList">
|
||
<el-option :label="item" :value="item" :key="item"></el-option>
|
||
</template>
|
||
</el-select>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="tag-item">
|
||
<label class="tag-title">报告名称:</label>
|
||
<el-input v-model="q.name" placeholder="请输入报告名称"></el-input>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="6" align="right" class="tag-btns">
|
||
<el-button type="primary" @click="search">查询</el-button>
|
||
<el-button type="default" @click="reset">重置</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-row class="tag-btn">
|
||
|
||
<el-button v-if="!isAdmin" type="primary" @click="permissionApp(false)">申请权限</el-button>
|
||
|
||
<div class="tag-right">
|
||
排序：
|
||
<el-button @click="clickBtn(1)" :class="{'checkClass':isShowbg1}">时间</el-button>
|
||
<el-button @click="clickBtn(2)" class="clickNum" :class="{'checkClass':isShowbg2}">点击量</el-button>
|
||
<el-button @click="clickBtn(3)" :class="{'checkClass':isShowbg3}">下载量</el-button>
|
||
</div>
|
||
</el-row>
|
||
|
||
<div class="table">
|
||
<el-row>
|
||
<el-col :span="4" class="treeList ">
|
||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||
</el-input>
|
||
<div class="lef-tree scroll-myself">
|
||
<el-tree
|
||
class="filter-tree"
|
||
:data="treeData"
|
||
show-checkbox
|
||
node-key="id"
|
||
default-expand-all
|
||
:filter-node-method="filterNode"
|
||
ref="tree"
|
||
@check="getHalfCheckedNode"
|
||
|
||
>
|
||
<template slot-scope="{node}">
|
||
<!-- <span v-if="node.label.length <= 10">{{ node.label }}</span>-->
|
||
<!-- <el-tooltip :content="node.label" placement="top">-->
|
||
<div :title="node.label" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 150px">
|
||
{{ node.label }}
|
||
</div>
|
||
<!-- </el-tooltip>-->
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="20" style="padding-left: 15px">
|
||
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
||
v-table-min-height="'calc(100vh - 320px)'"
|
||
@checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
|
||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
|
||
<template #default="{ row, rowIndex }">
|
||
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-header-overflow field="name" title="报告名称">
|
||
<template #default="{ row, rowIndex }">
|
||
<!-- <label class="row-title" >-->
|
||
<!-- <el-tooltip :content="row.name" placement="top-start">-->
|
||
<span class="report-name"> {{ row.name }}</span>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="mainContent" title="摘要"></vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="reportRating" title="报告评级">
|
||
<template #default="{row}">
|
||
<el-rate
|
||
v-model="row.reportRating/2"
|
||
disabled
|
||
text-color="#ff9900"
|
||
>
|
||
</el-rate>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="thumbUp" title="点赞数">
|
||
<template #default="{ row }">
|
||
{{row.thumbUp || 0}}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="clicks" title="点击量">
|
||
<template #default="{ row }">
|
||
{{row.clicks || 0}}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="download" title="下载量">
|
||
<template #default="{ row }">
|
||
{{row.download || 0}}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-overflow show-header-overflow field="uploader" title="上传人"></vxe-column>
|
||
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="text" v-if="row.power == 1 ||row.power == 2" @click="goReportDetail(row)">预览</el-button>
|
||
<el-button type="text" v-if="row.power == 3 || row.power == 2 " @click="downloadRow(row)">下载</el-button>
|
||
<el-button type="text" v-if="row.power !== 2 && !isAdmin" @click="permissionApp(row)">申请权限</el-button>
|
||
|
||
</template>
|
||
</vxe-column>
|
||
|
||
</vxe-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="q.pageNo"
|
||
:page-sizes="[5, 10, 20]"
|
||
:page-size="q.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<!--预览-->
|
||
<el-dialog title="预览" :visible.sync="dialogPreview" width="1000px" :close-on-click-modal="false"
|
||
:close-on-press-escape="false" :fullscreen="fullscreen">
|
||
<div slot="title" class="dialog-title">
|
||
<span>预览</span>
|
||
<img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt=""
|
||
@click="fullscreen = !fullscreen">
|
||
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen">
|
||
</div>
|
||
<div class="preview-dialog-body" :class="{'active': fullscreen}">
|
||
<!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
|
||
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
|
||
<!-- 这里用v-if是让水印更新 -->
|
||
<el-scrollbar
|
||
v-if="dialogPreview"
|
||
v-watermark="{ text: watermarkText }">
|
||
<div class="preview-content" v-html="content"></div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {downloadFile} from '@/utils/downloadFile'
|
||
import {formatDate} from '@/utils/date'
|
||
|
||
export default {
|
||
name: 'ReportList',
|
||
data() {
|
||
return {
|
||
isShowbg1:true,
|
||
isShowbg2:false,
|
||
isShowbg3:false,
|
||
value:3.7,
|
||
watermarkText: '', // 水印
|
||
fullscreen: false,
|
||
q: {
|
||
keyContent: '',
|
||
year: [],
|
||
name: '',
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
orderByClicks:0,
|
||
orderByDownload:0,
|
||
orderByTime:1
|
||
},
|
||
total: 0,
|
||
tableData: [],
|
||
yearList: [],
|
||
tagData: {
|
||
1: {
|
||
name: '',
|
||
tagShow: false,
|
||
tags: [],
|
||
isIndeterminate: true,
|
||
checkAll: false
|
||
},
|
||
2: {
|
||
name: '',
|
||
tagShow: false,
|
||
tags: [],
|
||
isIndeterminate: true,
|
||
checkAll: false
|
||
},
|
||
3: {
|
||
name: '',
|
||
tagShow: false,
|
||
tags: [],
|
||
isIndeterminate: true,
|
||
checkAll: false
|
||
}
|
||
},
|
||
dialogPreview: false, // 预览
|
||
content: '',
|
||
filterText: '',
|
||
treeData: [],
|
||
checkIds: [],
|
||
checkList: [],
|
||
checkedKeys: [],
|
||
isAdmin: false //是否是管理员
|
||
}
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.tree.filter(val);
|
||
}
|
||
},
|
||
methods: {
|
||
clickBtn(type){
|
||
for(let i= 1;i<4;i++){
|
||
this['isShowbg'+i] = false
|
||
}
|
||
this['isShowbg'+type] = true
|
||
if(type==1){
|
||
this.q.orderByTime=1
|
||
this.q.orderByClicks=0
|
||
this.q.orderByDownload=0
|
||
|
||
}else if(type==2){
|
||
this.q.orderByClicks=1
|
||
this.q.orderByTime=0
|
||
this.q.orderByDownload=0
|
||
|
||
}else{
|
||
this.q.orderByDownload=1
|
||
this.q.orderByClicks=0
|
||
this.q.orderByTime=0
|
||
}
|
||
this.q.pageNo=1
|
||
this.reportList()
|
||
},
|
||
getKeyContent(list) {
|
||
if (list) {
|
||
let keyContent = []
|
||
list = JSON.parse(list)
|
||
list.forEach(item => {
|
||
keyContent.push(item.text)
|
||
})
|
||
keyContent = keyContent.toString().replace(/,/g, '/');
|
||
if (keyContent == '') keyContent = '---'
|
||
// if(keyContent.length>15){
|
||
// keyContent=keyContent.slice(0,15) +'...'
|
||
// }
|
||
return keyContent
|
||
} else {
|
||
return ''
|
||
}
|
||
},
|
||
getHalfCheckedNode(node, data) {
|
||
this.checkedKeys = data.checkedKeys
|
||
this.reportList()
|
||
},
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.label.indexOf(value) !== -1;
|
||
},
|
||
selectAllEvent({checked}) {
|
||
const records = this.$refs.xTable.getCheckboxRecords()
|
||
this.checkList = records
|
||
this.checkIds = records.map(item => {
|
||
return item.id
|
||
})
|
||
},
|
||
selectChangeEvent({checked}) {
|
||
const records = this.$refs.xTable.getCheckboxRecords()
|
||
this.checkList = records
|
||
this.checkIds = records.map(item => {
|
||
return item.id
|
||
})
|
||
},
|
||
permissionApp(row) {
|
||
if(row){
|
||
if(row.isAct == 0){
|
||
this.$message.warning("当前"+row.name+"已经在流程中")
|
||
return
|
||
}
|
||
this.$router.push({
|
||
path: '/permission/launch',
|
||
query: {id: 'AEHJB8YNJ3', isBegin: 1,ids:row.id}
|
||
})
|
||
}else{
|
||
if(this.checkList.length <1){
|
||
this.$message.warning("至少选择一条报告进行权限申请")
|
||
return
|
||
}
|
||
let already=this.checkList.filter(item =>{
|
||
if( +item.isAct == 0){
|
||
return item
|
||
}
|
||
})
|
||
if(already.length>0) {
|
||
let name=already.map(item=>item.name)
|
||
this.$message.warning("当前选择的"+name.join(',')+"已经在流程中")
|
||
return
|
||
}
|
||
// 有预览权限的时候是否还让继续申请
|
||
let temp=this.checkList.filter(item =>{
|
||
if( +item.power == 2){
|
||
return item.name
|
||
}
|
||
})
|
||
console.log(temp)
|
||
if(temp.length>0) {
|
||
let name=temp.map(item=>item.name)
|
||
this.$message.warning("当前选择的"+name.join(',')+"已经有权限，无须申请！")
|
||
return
|
||
}
|
||
|
||
this.$router.push({
|
||
path: '/permission/launch',
|
||
query: {id: 'AEHJB8YNJ3', isBegin: 1,ids:this.checkIds.join(',')}
|
||
})
|
||
}
|
||
|
||
},
|
||
init() {
|
||
this.getTreeLabel()
|
||
// this.labelList()
|
||
this.reportDateList()
|
||
this.reportList()
|
||
},
|
||
getTreeLabel() {
|
||
this.$api.report.labelList().then(res => {
|
||
this.treeData = res.data
|
||
})
|
||
},
|
||
|
||
// 标签列表
|
||
labelList() {
|
||
this.$api.report.labelList().then(({data}) => {
|
||
this.tagData[1].name = data.labelOne.name
|
||
this.tagData[2].name = data.labelTwo.name
|
||
this.tagData[3].name = data.labelThree.name
|
||
this.tagData[1].tags = data.labelOne.childList
|
||
this.tagData[2].tags = data.labelTwo.childList
|
||
this.tagData[3].tags = data.labelThree.childList
|
||
})
|
||
},
|
||
search() {
|
||
this.q.pageNo = 1
|
||
this.reportList()
|
||
},
|
||
// 列表
|
||
reportList() {
|
||
this.$api.report.reportList({...this.q, labelId: this.checkedKeys}).then(({data}) => {
|
||
this.tableData = data.records
|
||
this.total = data.total
|
||
this.q.pageNo = data.current
|
||
this.q.pageSize = data.size
|
||
if (!data.records.length && this.q.pageNo !== 1) {
|
||
this.q.pageNo = 1
|
||
this.reportList()
|
||
}
|
||
})
|
||
},
|
||
// 监听全选按钮
|
||
handleCheckAllChange(val, type) {
|
||
switch (type) {
|
||
case 1:
|
||
this.q.labelOneId = val ? this.tagData[type].tags.map(item => item.id) : []
|
||
break
|
||
case 2:
|
||
this.q.labelTwoId = val ? this.tagData[type].tags.map(item => item.id) : []
|
||
break
|
||
case 3:
|
||
this.q.labelThreeId = val ? this.tagData[type].tags.map(item => item.id) : []
|
||
break
|
||
}
|
||
this.tagData[type].isIndeterminate = !val
|
||
},
|
||
// 监听group checkbox
|
||
handleCheckedTagsChange(val, type) {
|
||
this.tagData[type].checkAll = (val.length === this.tagData[type].tags.length)
|
||
this.tagData[type].isIndeterminate = val.length < this.tagData[type].tags.length
|
||
},
|
||
// 切换展开隐藏
|
||
switchTagShow(type) {
|
||
this.tagData[type].tagShow = !this.tagData[type].tagShow
|
||
},
|
||
// 日期列表
|
||
reportDateList() {
|
||
this.$api.report.reportDateList().then(({data}) => {
|
||
this.yearList = data.list
|
||
})
|
||
},
|
||
// 单页数据量
|
||
handleSizeChange(val) {
|
||
this.q.pageSize = val
|
||
this.q.pageNo = 1
|
||
this.reportList()
|
||
},
|
||
// 第几页
|
||
handleCurrentChange(val) {
|
||
this.q.pageNo = val
|
||
this.reportList()
|
||
},
|
||
// 预览
|
||
previewRow(row) {
|
||
this.fullscreen = false
|
||
// 更新预览水印的时间戳
|
||
this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`
|
||
this.$api.report.reportGetReportHtmlId({id: row.id}).then(({data}) => {
|
||
this.content = data.content
|
||
this.dialogPreview = true
|
||
})
|
||
},
|
||
// 重置
|
||
reset() {
|
||
this.q = {
|
||
keyContent: '',
|
||
year: [],
|
||
labelOneId: [],
|
||
labelTwoId: [],
|
||
labelThreeId: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
orderByTime:1,
|
||
orderByDownload:0,
|
||
orderByClicks:0
|
||
}
|
||
this.total = 0
|
||
this.tableData = []
|
||
this.tagData[1].checkAll = false
|
||
this.tagData[1].isIndeterminate = true
|
||
this.tagData[2].checkAll = false
|
||
this.tagData[2].isIndeterminate = true
|
||
this.tagData[3].checkAll = false
|
||
this.tagData[3].isIndeterminate = true
|
||
this.reportList()
|
||
},
|
||
// 下载
|
||
downloadRow(row) {
|
||
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
|
||
// confirmButtonText: '确定',
|
||
// cancelButtonText: '取消',
|
||
// type: 'warning'
|
||
// }).then(() => {
|
||
this.$api.report.reportDownload({fileId: row.fileId,repostId:row.id}).then(res => {
|
||
downloadFile(res)
|
||
})
|
||
// })
|
||
},
|
||
// 跳转到详情
|
||
goReportDetail(row) {
|
||
window.open('/report/detail?id='+this.$route.query.id+'&reportId='+row.id)
|
||
this.reportList()
|
||
// this.$router.push({path: '/report/detail', query: {id: this.$route.query.id, reportId: row.id}})
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
// 判断当前人是不是管理员
|
||
if(this.$store.getters.userInfo.levelId=='1' || this.$store.getters.userInfo.levelId=='2'
|
||
||this.$store.getters.userInfo.levelId=='3' || this.$store.getters.userInfo.levelId=='4'
|
||
||this.$store.getters.userInfo.employeeTypeId=='1' ){
|
||
this.isAdmin = true
|
||
}else{
|
||
this.isAdmin=false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.keyContent {
|
||
display: inline-block;
|
||
width: 50px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.treeList {
|
||
padding: 20px 20px 0;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||
//margin-right: 20px;
|
||
|
||
.filter-tree {
|
||
margin-top: 20px;
|
||
height: calc(100vh - 320px);
|
||
//overflow: scroll;
|
||
}
|
||
|
||
}
|
||
|
||
.tree {
|
||
height: 500px;
|
||
//overflow: auto;
|
||
.filter-tree {
|
||
margin-top: 20px;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.report-name {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.report-list {
|
||
.title {
|
||
border-bottom: 1px solid #EBEEF5;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
margin: 0 18px 0 22px;
|
||
|
||
span {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
}
|
||
}
|
||
|
||
.tag-btn {
|
||
.el-button + .el-button {
|
||
margin-left: 0px;
|
||
|
||
|
||
}
|
||
|
||
padding: 18px 13px 11px;
|
||
.tag-right{
|
||
float: right;
|
||
::v-deep .el-button{
|
||
border: 1px solid #3D87CC;
|
||
border-radius: 0;
|
||
color: #3D87CC;
|
||
background-color: #ecf5ff;
|
||
}
|
||
.clickNum{
|
||
border: none;
|
||
border-top: 1px solid #3D87CC ;
|
||
border-bottom: 1px solid #3D87CC;
|
||
}
|
||
|
||
}
|
||
.checkClass{
|
||
background-color: rgba(64, 158, 255, 1) !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
.tag-search {
|
||
padding-top: 9px;
|
||
|
||
::v-deep .el-date-picker,
|
||
::v-deep .el-input {
|
||
width: 240px;
|
||
}
|
||
|
||
.tag-item {
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
|
||
.year {
|
||
::v-deep .el-input__inner {
|
||
padding: 0 15px !important;
|
||
}
|
||
}
|
||
|
||
label.tag-title {
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
color: #646464;
|
||
display: inline-block;
|
||
// width: 112px;
|
||
height: 19px;
|
||
line-height: 19px;
|
||
padding-left: 13px;
|
||
// border-right: 1px solid #BFBFBF;
|
||
margin-right: 10px;
|
||
margin-top: 2.5px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tag-show {
|
||
flex: 1;
|
||
margin-right: 28px;
|
||
height: 19px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
&.active {
|
||
height: auto;
|
||
}
|
||
|
||
::v-deep .check-active {
|
||
.el-checkbox__label {
|
||
color: #434343;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-checkbox {
|
||
margin-right: 15px;
|
||
color: #434343;
|
||
}
|
||
|
||
::v-deep .el-checkbox__label {
|
||
min-width: 80px;
|
||
}
|
||
|
||
::v-deep .el-checkbox-group {
|
||
display: inline;
|
||
}
|
||
|
||
.el-icon-arrow-down,
|
||
.el-icon-arrow-up {
|
||
color: #C0C4CC;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tag-btns {
|
||
padding-right: 15px;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
margin: 0 14px 0 13px;
|
||
|
||
.row-info {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.icon-file-type {
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-right: 21px;
|
||
}
|
||
|
||
.row-text {
|
||
width: calc(100% - 48px - 21px);
|
||
flex: 1;
|
||
display: flex;
|
||
flex-flow: column;
|
||
text-align: left;
|
||
|
||
.row-title {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #262626;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: #1890FF;
|
||
}
|
||
}
|
||
|
||
.tag-info {
|
||
.icon-tag-item {
|
||
margin-left: 12px;
|
||
|
||
img {
|
||
width: 12px;
|
||
margin-right: 5px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
span {
|
||
display: inline-block;
|
||
min-width: 80px;
|
||
font-size: 12px;
|
||
color: #8C8C8C;
|
||
font-weight: 500;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-pagination {
|
||
margin-top: 13px;
|
||
padding-left: 20px;
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.dialog-title {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.full-screen {
|
||
cursor: pointer;
|
||
width: 24px;
|
||
height: 24px;
|
||
vertical-align: middle;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.preview-dialog-body {
|
||
padding: 9px 25px 17px 22px;
|
||
height: 60vh;
|
||
position: relative;
|
||
|
||
&.active {
|
||
height: calc(100vh - 52px);
|
||
}
|
||
|
||
.full-screen {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
z-index: 10;
|
||
right: 35px;
|
||
top: 10px;
|
||
width: 24px;
|
||
height: 24px;
|
||
//&:hover{
|
||
// color: #199BFF;
|
||
//}
|
||
}
|
||
|
||
::v-deep .el-scrollbar {
|
||
height: 100%;
|
||
|
||
.el-scrollbar__wrap {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.el-scrollbar__view {
|
||
padding: 0 !important;
|
||
|
||
.preview-content {
|
||
img {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
table {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|