DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【修改bug】修改高度自适应

Browse Source
This commit is contained in:
zhoulingpo
2023-04-27 11:20:05 +08:00
parent 25e1df5b61
commit b18da51a0e
5 changed files with 517 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/common.scss
+14
View File
@@ -49,3 +49,17 @@
width: 160px !important; width: 160px !important;
overflow: hidden; overflow: hidden;
} }
/* 自定义滚动条的样式 */
.scroll-wrap {
background-color: #fff;
}
.scroll-view::-webkit-scrollbar {
width: 3px;
}
.scroll-view::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: red;
}
src/views/Report/ReportList.vue
+119 -92
View File
@@ -104,6 +104,7 @@
<el-col :span="4" class="treeList"> <el-col :span="4" class="treeList">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> <el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input> </el-input>
<el-scrollbar wrap-class="scroll-wrap" view-class="scroll-view">
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="treeData" :data="treeData"
@@ -115,9 +116,12 @@
@check="getHalfCheckedNode" @check="getHalfCheckedNode"
> >
</el-tree> </el-tree>
</el-scrollbar>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'" <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"> @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
<vxe-column type="checkbox" width="60"></vxe-column> <vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77"> <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
@@ -127,42 +131,42 @@
</vxe-column> </vxe-column>
<vxe-column show-header-overflow field="name" title="报告名称"> <vxe-column show-header-overflow field="name" title="报告名称">
<template #default="{ row, rowIndex }"> <template #default="{ row, rowIndex }">
<!-- <label class="row-title" >--> <!-- <label class="row-title" >-->
<!-- <el-tooltip :content="row.name" placement="top-start">--> <!-- <el-tooltip :content="row.name" placement="top-start">-->
<span class="report-name" @click="goReportDetail(row)"> {{row.name}}</span> <span class="report-name" @click="goReportDetail(row)"> {{ row.name }}</span>
<!-- </el-tooltip>--> <!-- </el-tooltip>-->
<!-- </label>--> <!-- </label>-->
<!-- <div class="row-info">--> <!-- <div class="row-info">-->
<!-- <img v-if="row.fileType === '3'" class="icon-file-type" src="@/assets/imgs/icon-pdf.png" alt="">--> <!-- <img v-if="row.fileType === '3'" class="icon-file-type" src="@/assets/imgs/icon-pdf.png" alt="">-->
<!-- <img v-if="row.fileType === '4'" class="icon-file-type" src="@/assets/imgs/icon-doc.png" alt="">--> <!-- <img v-if="row.fileType === '4'" class="icon-file-type" src="@/assets/imgs/icon-doc.png" alt="">-->
<!-- <img v-if="row.fileType === '1'" class="icon-file-type" src="@/assets/imgs/icon-ppt.png" alt="">--> <!-- <img v-if="row.fileType === '1'" class="icon-file-type" src="@/assets/imgs/icon-ppt.png" alt="">-->
<!-- <img v-if="row.fileType === '2'" class="icon-file-type" src="@/assets/imgs/icon-excel.png" alt="">--> <!-- <img v-if="row.fileType === '2'" class="icon-file-type" src="@/assets/imgs/icon-excel.png" alt="">-->
<!-- <div class="row-text">--> <!-- <div class="row-text">-->
<!-- <label class="row-title" @click="goReportDetail(row)">--> <!-- <label class="row-title" @click="goReportDetail(row)">-->
<!-- <el-tooltip :content="row.name" placement="top-start">--> <!-- <el-tooltip :content="row.name" placement="top-start">-->
<!-- <span>{{row.name}}</span>--> <!-- <span>{{row.name}}</span>-->
<!-- </el-tooltip>--> <!-- </el-tooltip>-->
<!-- </label>--> <!-- </label>-->
<!-- <div class="tag-info">--> <!-- <div class="tag-info">-->
<!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-time.png"--> <!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-time.png"-->
<!-- alt=""><span>{{row?.year}}</span></span>--> <!-- alt=""><span>{{row?.year}}</span></span>-->
<!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag01.png"--> <!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag01.png"-->
<!-- alt=""><span class="keyContent">{{getKeyContent(row?.keyContent)}}</span></span>--> <!-- alt=""><span class="keyContent">{{getKeyContent(row?.keyContent)}}</span></span>-->
<!-- &lt;!&ndash; <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag02.png"--> <!-- &lt;!&ndash; <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag02.png"-->
<!-- alt=""><span>{{row.labelTwoName}}</span></span>--> <!-- alt=""><span>{{row.labelTwoName}}</span></span>-->
<!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag03.png"--> <!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag03.png"-->
<!-- alt=""><span>{{row.labelThreeName}}</span></span> &ndash;&gt;--> <!-- alt=""><span>{{row.labelThreeName}}</span></span> &ndash;&gt;-->
<!-- &lt;!&ndash;<span class="icon-tag-item"><span>{{(row.fileSize / 1024 / 1024).toFixed(2) }}MB</span></span>&ndash;&gt;--> <!-- &lt;!&ndash;<span class="icon-tag-item"><span>{{(row.fileSize / 1024 / 1024).toFixed(2) }}MB</span></span>&ndash;&gt;-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
</template> </template>
</vxe-column> </vxe-column>
<vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column> <vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
<vxe-column show-overflow show-header-overflow field="keyContent" title="关键字"> <vxe-column show-overflow show-header-overflow field="keyContent" title="关键字">
<template #default="{ row }"> <template #default="{ row }">
{{getKeyContent(row.keyContent)}} {{ getKeyContent(row.keyContent) }}
</template> </template>
</vxe-column> </vxe-column>
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right"> <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
@@ -190,7 +194,8 @@
:close-on-press-escape="false" :fullscreen="fullscreen"> :close-on-press-escape="false" :fullscreen="fullscreen">
<div slot="title" class="dialog-title"> <div slot="title" class="dialog-title">
<span>预览</span> <span>预览</span>
<img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !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"> <img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen">
</div> </div>
<div class="preview-dialog-body" :class="{'active': fullscreen}"> <div class="preview-dialog-body" :class="{'active': fullscreen}">
@@ -208,19 +213,19 @@
</template> </template>
<script> <script>
import { downloadFile } from '@/utils/downloadFile' import {downloadFile} from '@/utils/downloadFile'
import { formatDate } from '@/utils/date' import {formatDate} from '@/utils/date'
export default { export default {
name: 'ReportList', name: 'ReportList',
data () { data() {
return { return {
watermarkText: '', // 水印 watermarkText: '', // 水印
fullscreen: false, fullscreen: false,
q: { q: {
keyContent: '', keyContent: '',
year: [], year: [],
name:'', name: '',
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}, },
@@ -252,12 +257,11 @@ export default {
}, },
dialogPreview: false, // 预览 dialogPreview: false, // 预览
content: '', content: '',
filterText:'', filterText: '',
treeData: [ treeData: [],
],
checkIds: [], checkIds: [],
checkList: [], checkList: [],
checkedKeys:[], checkedKeys: [],
isAdmin: false //是否是管理员 isAdmin: false //是否是管理员
} }
}, },
@@ -267,46 +271,46 @@ export default {
} }
}, },
methods: { methods: {
getKeyContent(list){ getKeyContent(list) {
if(list){ if (list) {
let keyContent=[] let keyContent = []
list = JSON.parse(list) list = JSON.parse(list)
list.forEach(item => { list.forEach(item => {
keyContent.push(item.text) keyContent.push(item.text)
}) })
keyContent = keyContent.toString().replace(/,/g, '/'); keyContent = keyContent.toString().replace(/,/g, '/');
if(keyContent=='') keyContent='---' if (keyContent == '') keyContent = '---'
// if(keyContent.length>15){ // if(keyContent.length>15){
// keyContent=keyContent.slice(0,15) +'...' // keyContent=keyContent.slice(0,15) +'...'
// } // }
return keyContent return keyContent
}else{ } else {
return '' return ''
} }
}, },
getHalfCheckedNode(node,data){ getHalfCheckedNode(node, data) {
this.checkedKeys=data.checkedKeys this.checkedKeys = data.checkedKeys
this.reportList() this.reportList()
}, },
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1;
}, },
selectAllEvent ({ checked }) { selectAllEvent({checked}) {
const records = this.$refs.xTable.getCheckboxRecords() const records = this.$refs.xTable.getCheckboxRecords()
this.checkList= records this.checkList = records
this.checkIds = records.map(item => { this.checkIds = records.map(item => {
return item.id return item.id
}) })
}, },
selectChangeEvent ({ checked }) { selectChangeEvent({checked}) {
const records = this.$refs.xTable.getCheckboxRecords() const records = this.$refs.xTable.getCheckboxRecords()
this.checkList= records this.checkList = records
this.checkIds = records.map(item => { this.checkIds = records.map(item => {
return item.id return item.id
}) })
}, },
permissionApp () { permissionApp() {
// if(this.checkList.length <1){ // if(this.checkList.length <1){
// this.$message.warning("至少选择一条报告进行权限申请") // this.$message.warning("至少选择一条报告进行权限申请")
// return // return
@@ -324,24 +328,24 @@ export default {
this.$router.push({ this.$router.push({
path: '/permission/launch', path: '/permission/launch',
query: { id: 'AEHJB8YNJ3', ids: this.checkIds.toString() } query: {id: 'AEHJB8YNJ3', ids: this.checkIds.toString()}
}) })
}, },
init () { init() {
this.getTreeLabel() this.getTreeLabel()
// this.labelList() // this.labelList()
this.reportDateList() this.reportDateList()
this.reportList() this.reportList()
}, },
getTreeLabel(){ getTreeLabel() {
this.$api.report.labelList().then(res => { this.$api.report.labelList().then(res => {
this.treeData=res.data this.treeData = res.data
}) })
}, },
// 标签列表 // 标签列表
labelList () { labelList() {
this.$api.report.labelList().then(({ data }) => { this.$api.report.labelList().then(({data}) => {
this.tagData[1].name = data.labelOne.name this.tagData[1].name = data.labelOne.name
this.tagData[2].name = data.labelTwo.name this.tagData[2].name = data.labelTwo.name
this.tagData[3].name = data.labelThree.name this.tagData[3].name = data.labelThree.name
@@ -350,13 +354,13 @@ export default {
this.tagData[3].tags = data.labelThree.childList this.tagData[3].tags = data.labelThree.childList
}) })
}, },
search () { search() {
this.q.pageNo = 1 this.q.pageNo = 1
this.reportList() this.reportList()
}, },
// 列表 // 列表
reportList () { reportList() {
this.$api.report.reportList({...this.q,labelId:this.checkedKeys}).then(({ data }) => { this.$api.report.reportList({...this.q, labelId: this.checkedKeys}).then(({data}) => {
this.tableData = data.records this.tableData = data.records
this.total = data.total this.total = data.total
this.q.pageNo = data.current this.q.pageNo = data.current
@@ -368,7 +372,7 @@ export default {
}) })
}, },
// 监听全选按钮 // 监听全选按钮
handleCheckAllChange (val, type) { handleCheckAllChange(val, type) {
switch (type) { switch (type) {
case 1: case 1:
this.q.labelOneId = val ? this.tagData[type].tags.map(item => item.id) : [] this.q.labelOneId = val ? this.tagData[type].tags.map(item => item.id) : []
@@ -383,43 +387,43 @@ export default {
this.tagData[type].isIndeterminate = !val this.tagData[type].isIndeterminate = !val
}, },
// 监听group checkbox // 监听group checkbox
handleCheckedTagsChange (val, type) { handleCheckedTagsChange(val, type) {
this.tagData[type].checkAll = (val.length === this.tagData[type].tags.length) this.tagData[type].checkAll = (val.length === this.tagData[type].tags.length)
this.tagData[type].isIndeterminate = val.length < this.tagData[type].tags.length this.tagData[type].isIndeterminate = val.length < this.tagData[type].tags.length
}, },
// 切换展开隐藏 // 切换展开隐藏
switchTagShow (type) { switchTagShow(type) {
this.tagData[type].tagShow = !this.tagData[type].tagShow this.tagData[type].tagShow = !this.tagData[type].tagShow
}, },
// 日期列表 // 日期列表
reportDateList () { reportDateList() {
this.$api.report.reportDateList().then(({ data }) => { this.$api.report.reportDateList().then(({data}) => {
this.yearList = data.list this.yearList = data.list
}) })
}, },
// 单页数据量 // 单页数据量
handleSizeChange (val) { handleSizeChange(val) {
this.q.pageSize = val this.q.pageSize = val
this.q.pageNo = 1 this.q.pageNo = 1
this.reportList() this.reportList()
}, },
// 第几页 // 第几页
handleCurrentChange (val) { handleCurrentChange(val) {
this.q.pageNo = val this.q.pageNo = val
this.reportList() this.reportList()
}, },
// 预览 // 预览
previewRow (row) { previewRow(row) {
this.fullscreen = false this.fullscreen = false
// 更新预览水印的时间戳 // 更新预览水印的时间戳
this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}` 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.$api.report.reportGetReportHtmlId({id: row.id}).then(({data}) => {
this.content = data.content this.content = data.content
this.dialogPreview = true this.dialogPreview = true
}) })
}, },
// 重置 // 重置
reset () { reset() {
this.q = { this.q = {
keyContent: '', keyContent: '',
year: [], year: [],
@@ -440,50 +444,66 @@ export default {
this.reportList() this.reportList()
}, },
// 下载 // 下载
downloadRow (row) { downloadRow(row) {
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', { // this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
// confirmButtonText: '确定', // confirmButtonText: '确定',
// cancelButtonText: '取消', // cancelButtonText: '取消',
// type: 'warning' // type: 'warning'
// }).then(() => { // }).then(() => {
this.$api.report.reportDownload({ fileId: row.fileId }).then(res => { this.$api.report.reportDownload({fileId: row.fileId}).then(res => {
downloadFile(res) downloadFile(res)
}) })
// }) // })
}, },
// 跳转到详情 // 跳转到详情
goReportDetail (row) { goReportDetail(row) {
this.$router.push({ path: '/report/detail', query: { id: this.$route.query.id, row: JSON.stringify(row) } }) this.$router.push({path: '/report/detail', query: {id: this.$route.query.id, row: JSON.stringify(row)}})
} }
}, },
created () { created() {
this.init() this.init()
// 判断当前人是不是管理员 // 判断当前人是不是管理员
this.isAdmin = this.$store.getters.userInfo.roleIdList.indexOf('35LLRCAQ8D')>-1 this.isAdmin = this.$store.getters.userInfo.roleIdList.indexOf('35LLRCAQ8D') > -1
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.keyContent{ .keyContent {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.treeList{
padding: 20px; .treeList {
padding: 20px 20px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
margin-right: 20px; margin-right: 20px;
.filter-tree{
.filter-tree {
margin-top: 20px; margin-top: 20px;
height: calc(100vh - 320px);
//overflow: scroll;
} }
} }
.report-name{
.tree {
height: 500px;
//overflow: auto;
.filter-tree {
margin-top: 20px;
}
}
.report-name {
cursor: pointer; cursor: pointer;
} }
.report-list { .report-list {
.title { .title {
border-bottom: 1px solid #EBEEF5; border-bottom: 1px solid #EBEEF5;
@@ -497,9 +517,11 @@ export default {
color: #262626; color: #262626;
} }
} }
.tag-btn{
.tag-btn {
padding: 18px 13px 11px; padding: 18px 13px 11px;
} }
.tag-search { .tag-search {
padding-top: 9px; padding-top: 9px;
@@ -546,8 +568,8 @@ export default {
height: auto; height: auto;
} }
::v-deep .check-active{ ::v-deep .check-active {
.el-checkbox__label{ .el-checkbox__label {
color: #434343; color: #434343;
} }
} }
@@ -647,11 +669,12 @@ export default {
} }
} }
.dialog-title{ .dialog-title {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.full-screen{
.full-screen {
cursor: pointer; cursor: pointer;
width: 24px; width: 24px;
height: 24px; height: 24px;
@@ -664,10 +687,12 @@ export default {
padding: 9px 25px 17px 22px; padding: 9px 25px 17px 22px;
height: 60vh; height: 60vh;
position: relative; position: relative;
&.active{
&.active {
height: calc(100vh - 52px); height: calc(100vh - 52px);
} }
.full-screen{
.full-screen {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
@@ -682,18 +707,20 @@ export default {
::v-deep .el-scrollbar { ::v-deep .el-scrollbar {
height: 100%; height: 100%;
.el-scrollbar__wrap{
.el-scrollbar__wrap {
overflow-x: auto; overflow-x: auto;
} }
.el-scrollbar__view { .el-scrollbar__view {
padding: 0 !important; padding: 0 !important;
.preview-content{ .preview-content {
img { img {
max-width: 100% !important; max-width: 100% !important;
} }
table{
table {
margin: 0 auto; margin: 0 auto;
} }
} }
src/views/Report/ReportManager.vue
+7 -4
View File
@@ -45,6 +45,7 @@
<el-col :span="4" class="treeList"> <el-col :span="4" class="treeList">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> <el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input> </el-input>
<el-scrollbar wrap-class="scroll-wrap" view-class="scroll-view">
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="treeData" :data="treeData"
@@ -64,6 +65,7 @@
</el-tooltip> </el-tooltip>
</template> </template>
</el-tree> </el-tree>
</el-scrollbar>
</el-col> </el-col>
<el-col :span="19 "> <el-col :span="19 ">
<div class="table"> <div class="table">
@@ -157,6 +159,7 @@
</el-input> </el-input>
<el-button type="primary" class="btn" @click="add">新增</el-button> <el-button type="primary" class="btn" @click="add">新增</el-button>
</div> </div>
<el-scrollbar wrap-class="scroll-wrap" view-class="scroll-view">
<div class="tree"> <div class="tree">
<el-tree class="filter-tree" :data="treeData" default-expand-all :filter-node-method="filterNode" ref="tree"> <el-tree class="filter-tree" :data="treeData" default-expand-all :filter-node-method="filterNode" ref="tree">
<span class="custom-tree-node" slot-scope="{ node,data}"> <span class="custom-tree-node" slot-scope="{ node,data}">
@@ -171,6 +174,7 @@
</span> </span>
</el-tree> </el-tree>
</div> </div>
</el-scrollbar>
</el-dialog> </el-dialog>
<labelModalVue ref="labelModalVue" @updateList="updateList"></labelModalVue> <labelModalVue ref="labelModalVue" @updateList="updateList"></labelModalVue>
<!--报告上传--> <!--报告上传-->
@@ -946,15 +950,14 @@ export default {
.filter-tree{ .filter-tree{
margin-top: 20px; margin-top: 20px;
height: calc(100vh - 320px); height: calc(100vh - 320px);
overflow: auto;
} }
} }
.tree{ .tree{
height: 500px; height: 400px;
overflow: auto; margin: 20px 0;
.filter-tree{ .filter-tree{
margin-top: 20px;
} }
} }
src/views/Report/reportManager/labelModal.vue
+4 -1
View File
@@ -207,5 +207,8 @@ export default {
line-height: 40px !important; line-height: 40px !important;
width: 100%; width: 100%;
} }
::v-deep .el-popper .el-cascader-menu .el-cascader-node__label{
width: 160px !important;
overflow: hidden;
}
</style> </style>
src/views/permissionApplication/launch.vue
+6 -2
View File
@@ -201,13 +201,17 @@ export default {
// } // }
this.handleReset() this.handleReset()
} }
if (this.$store.getters.handleProcess.taskDefinitionKey == 'aid4') { // 如果是从草稿进入的
// if (this.$route.query.isDraft) {
//
// }
if (this.$store.getters.handleProcess.taskDefinitionKey == 'aid4' || this.$route.query.isDraft) {
this.taskId = this.$store.getters.handleProcess.taskId this.taskId = this.$store.getters.handleProcess.taskId
this.prcNum = this.$store.getters.handleProcess.prcNum this.prcNum = this.$store.getters.handleProcess.prcNum
this.prcId = this.$store.getters.handleProcess.prcId this.prcId = this.$store.getters.handleProcess.prcId
this.prcName = this.$store.getters.handleProcess.prcName this.prcName = this.$store.getters.handleProcess.prcName
this.initShow = true this.initShow = true
this.formControlname = true // this.formControlname = true
this.getProcessDetail().then(res => { this.getProcessDetail().then(res => {
//基础信息 //基础信息