<template><div class="home-main"><!-- 报表中心  --><div class="tree"><el-row :gutter="24"><el-col :span="5"><el-card class="tree-left"><div slot="header">报表中心</div><!-- 报表搜索 --><el-input placeholder="输入搜索内容" v-model="inputVal" size="mini" clearable><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input><!-- 报表顶部三个选项 我的文件 最近使用 星标文件 --><div class="options"><divclass="option-item"v-for="option in optionList":key="option.value":class="{ active: activeOption === option.value }"@click="setActive(option.value)"><i :class="option.icon" :style="{ color: option.color }"></i><span class="fonts">{{ option.label }}</span></div></div><el-divider></el-divider><!-- 报表下拉框 --><div class="medium-action"><div class="head-container"><el-input placeholder="输入搜索内容" v-model="folderName" size="mini" clearable><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input><i class="el-icon-plus" style="cursor:pointer;" title="新增文件夹" @click="addFolder"></i></div></div><!-- 报表中心-树  --><div class="Tree"><el-tree:data="data":props="defaultProps"@check="checkBoxNodeClick"@node-click="getFileByFolder":filter-node-method="filterNode"ref="Ztree" :check-strictly="true" node-key="folderId" :default-expand-all="true"  show-checkbox><template v-slot="{ node, data }"><div><span class="custom-icon"><i v-if="node.expanded" class="el-icon-minus"></i><i v-else class="el-icon-folder-opened"></i></span><span @click.stop="handleTextClick(node, data)">{{ data.folderName }}</span><span style="padding-left: 5px;display: none"  class="btns"><el-button size="text" icon="el-icon-delete" @click="() => remove(node, data)"></el-button></span>
<!--                    <el-tooltip class="btns" effect="dark" placement="top" style="display: none">-->
<!--                      <el-button size="text" icon="el-icon-delete" @click="() => remove(node, data)" @mouseover="showDeleteIcon = true" @mouseout="showDeleteIcon = false" v-if="showDeleteIcon"></el-button>-->
<!--                    </el-tooltip>--></div></template></el-tree></div></el-card></el-col><el-col :span="19" style="padding-left: 0px"><!-- 右侧内容  --><div class="tree-right"><div class="tree-top"><el-button size="small" type="primary" plain icon="el-icon-upload" style="margin-left: 10px" @click="open = true">文件上传</el-button><!--切换为列表格式 --><span style="float: right"><el-tooltipclass="item"effect="dark"content="切换为列表展示"placement="top"><i class="el-icon-menu" style="font-size: 20px;color:green;" @click="listClick"></i></el-tooltip><!--切换为文件格式 --><el-tooltipclass="item"effect="dark"content="切换为文件夹展示"placement="top"><i class="el-icon-folder" style="font-size: 20px;color:orange" @click="folderClick"></i></el-tooltip></span></div><!-- 卡片列表布局 --><div class="card-list" v-show="showFolder" v-loading="loading"><!-- <div v-for="(item, index) in items" :key="index" class="card-item"> --><divv-for="(item, index) in items":key="index"class="card-item"v-if="items && items.length>0"><divclass="gift-box"><img class="gift" src="@/assets/images/excel.png" /></div><div class="title" style="margin:10px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;" :title="item.name">{{ item.name }}</div><div class="desc">{{ item.desc }}</div><divclass="hover-box":style="`background-color: #1EC695`"><div class="action"><a :href="item.address" :download="item.name"><i title="下载" class="el-icon-download"></i></a><span style="color:#fff">|</span><i  class="el-icon-star-off" title="收藏" @click="collectFile(item.id)"></i><span style="color:#fff">|</span><i  class="el-icon-delete" title="删除" @click="deleteFile(item.id)"></i></div></div></div></div><div v-if="items.length ===0 && !showList" style="position: absolute;top: 24%;left: 58%;color: #909399;"><i style="font-size:19px" class="el-icon-folder-opened"></i>暂无数据</div><!-- 列表表格布局 --><div class="table" v-show="showList"><el-table :data="items" border style="width: 100%" v-loading="loading"><!-- <el-table :data="currentPageItems" border style="width: 100%"> --><el-table-column label="名称" width="300" align="left"><template #default="{ row }"><div style="display: flex;justify-content: left;align-items: center;"><img  width="25" height="25" src="@/assets/images/excel.png" /><div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;" :title="row.name"><a style="color:#1890ff" :href="row.address" :download="row.name">{{ row.name }}</a></div></div></template></el-table-column><el-table-column prop="fileType" label="类型" width="100" align="center"></el-table-column><el-table-column prop="size" label="大小" align="center"></el-table-column><el-table-column prop="updateTime" label="修改时间" align="center" ></el-table-column><el-table-column prop="modifyUser" label="修改者" align="center" ></el-table-column><el-table-column label="操作" fixed="right" align="center" width="180px"><template #default="scope"><el-button :disabled="isCollected" plain type="warning" size="mini" @click="handleCollect(scope.row)" icon="el-icon-star-off">收藏</el-button></template></el-table-column></el-table></div><!-- 卡片 分页  --><div class="fy" v-show="showFolder"><paginationv-if="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getMyFile"/></div><!-- 列表分页 --><div class="list-fy" v-show="showList"><paginationv-if="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getMyFile"/></div></div></el-col></el-row></div><el-dialog title="上传文件" :visible.sync="open" width="500px"><el-form ref="fileForm" :model="fileForm"  label-width="150px"><el-row :gutter="24"><el-col :span="24"><el-form-item label="文件类型" prop="publicOrNot"><el-radio-group v-model="publicOrNot"><el-radio :label="0">私有</el-radio><el-radio :label="1">公共</el-radio></el-radio-group></el-form-item></el-col><el-col><el-form-item style="text-align: right;" class="self-form-item"><el-uploadstyle="width: 260px;transform: translate(-19px, 36px);"class="upload-demo"action="/system/forms/upload":accept="'.xls,.xlsx'":before-upload="beforeUpload"multiple:limit="1":show-file-list="false":on-exceed="handleExceed":file-list="fileList"><el-button  type="primary" style="margin-left: 10px;margin-right:10px">确定</el-button><!--                  <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>--></el-upload><el-button @click="open = false">取消</el-button></el-form-item></el-col></el-row></el-form></el-dialog><el-dialog title="新建文件夹" :visible.sync="visible" width="500px"><el-form ref="folderForm" :model="folderForm" :rules="rules" label-width="150px"><el-row :gutter="24"><el-col :span="24"><el-form-item label="文件夹名称" prop="folderName"><el-input placeholder="请输入文件夹名称" v-model="folderForm.folderName" /></el-form-item></el-col><el-col><el-form-item style="text-align: right;"><el-button type="primary" @click="submitForm()">确定</el-button><el-button @click="closeModel">取消</el-button></el-form-item></el-col></el-row></el-form></el-dialog><el-dialog title="收藏报表" :visible.sync="collectVisible" width="500px" @close="closeTreeModal"><el-tree ref="Ttree" :data="treeData"   :check-strictly="true" node-key="folderId"  @check="treeCheck" :default-expand-all="true"  show-checkbox :props="treeProps"><template v-slot="{ node, data }"><div><span class="custom-icon"><i v-if="node.expanded" class="el-icon-minus"></i><i v-else class="el-icon-folder-opened"></i></span><span>{{ data.folderName }}</span></div></template></el-tree><div slot="footer" class="dialog-footer"><el-button type="primary" @click="handleSelecNode">确 定</el-button><el-button @click="closeTreeModal">取 消</el-button></div></el-dialog></div>
</template><script>
import { uploadFile,getMyFiles,addFolder,getFolders,collectFile,getCollectFile,getPublicFile,getFileByFolder } from "@/api/reportManage/reportManage";
import {mapGetters} from "vuex";
export default {data() {return {visible: false,collectVisible:false, //收藏open:false,loading:false,showDeleteIcon: false,treeData: [],treeProps: {label: 'label',children: 'children',},//文件夹IDZFolderParentId:0, //查询文件夹选中的父级IDTfolderId:0, //收藏文件夹选中IDTfileId:'',// 文件ID// 报表中心树的数据data: [],// 左侧树基本配置defaultProps: {children: "children",label: "label",},// 点击的报表名称reportNameList: [],//文件fileList:[],folderForm:{},rules:{folderName: [{ required: true, message: "文件夹名称不能为空", trigger: ["blur"] }],},fileForm:{},folderName:'',// 报表keywordinputVal: "",// 报表中心下拉框options: [{value: "Option1",label: "Option1",},{value: "Option2",label: "Option2",},{value: "Option3",label: "Option3",},{value: "Option4",label: "Option4",},{value: "Option5",label: "Option5",},],// select绑定的value: "",// 3个action 点击选中效果----报表中心optionList: [{value: "shareFolder",label: "共享文件",icon: "el-icon-share",color: "#2DA9FA",},{value: "allFolder",label: "公用文件",icon: "el-icon-folder",color: "#2DA9FA",},{value: "myFolder",label: "我的文件",icon: "el-icon-user-solid",color: "#1EC695",},{value: "likeFolder",label: "我的收藏",icon: "el-icon-star-on",color: "#FF8541",},],// 报表中心---类activeOption: "",// 表格数据tableData: [],// 决定展示文件格式/列表格式showFolder: true,showList: false,// 展示不同的文字/颜色/描述 卡片列表items: [],collectData:[],noDataFlag:false,// 数据总条数-卡片total: 0,// 分页参数-卡片queryParams: {pageNum: 1,pageSize: 10,},currentPageItems: [], // 当前页显示的数据-卡片listTotal: 12,listParams: {pageNum: 1,pageSize: 8,},currentPageData: [], // 新增数组用于存储当前页数据isCollected:false, //是否收藏publicOrNot:0,//默认私有};},computed: {...mapGetters(['nickName','id']),},watch: {// 根据名称筛选部门树folderName(val) {this.$refs.Ztree.filter(val);},},// 初始渲染数据created() {this.getMyFile()this.getFolders()},methods: {// 检索filterNode(value, data) {if (!value) {return true;}return data.folderName.indexOf(value) !== -1;},//左侧文件夹checkBoxNodeClick(data,node){if(node.checkedKeys.length > 1){this.$refs.Ztree.setCheckedKeys([]);this.$refs.Ztree.setCheckedNodes([data]);}if(node.checkedKeys.length ===0){this.ZFolderParentId = 0}else{this.ZFolderParentId = data.folderId //选中文件的ID}},getFileByFolder(data,node){debuggerthis.loading = truethis.noDataFlag = falseconst folderId  = data.folderId //文件夹IDconst params = {folderId: folderId,pageNum: this.queryParams.pageNum,pageSize:this.queryParams.pageSize,}getFileByFolder(params).then(response => {if(response.code === 200){this.items = response.rowsif(this.items.length===0){this.noDataFlag = true}this.total = response.totalthis.items.forEach(item => {item.name = item.name.split("_")[0]+'.'+item.name.split(".")[1]})this.loading = falsethis.isCollected = false}else{console.log(response.msg)this.loading = false}}).catch(error=>{// this.$message.error(error)this.loading = false});},// 设置报表选中效果/点击item项setActive(option) {// console.log(option)this.activeOption = option;if(option === 'myFolder'){ //我的文件this.getMyFile()}else if(option === 'likeFolder'){ //我的收藏this.getCollectFile()}else if(option === 'allFolder'){this.getPublicFile()}},handleTextClick(node, data) {// 点击文本的逻辑this.getFileByFolder(data, node)},//弹窗文件夹树treeCheck(data, node) {if(node.checkedKeys.length > 1){this.$refs.Ttree.setCheckedKeys([]);this.$refs.Ttree.setCheckedNodes([data]);}if(node.checkedKeys.length ===0){this.TfolderId = ''}else{this.TfolderId = data.folderId //收藏的文件夹ID}},//收藏文件handleSelecNode(){if(!this.TfolderId){this.$message.warning('请选择要收藏的文件夹')return}const params = {userId:this.id,iscollect:"1", //1 收藏 0否fileId:this.TfileId,folderId:this.TfolderId}collectFile(params).then(response => {if(response.code === 200){this.$message.success('收藏成功')this.TfileId = ''this.TfolderId = ''this.$refs.Ttree.setCheckedNodes([])this.collectVisible = false}else{console.log(response.msg)this.collectVisible = false}}).catch(error=>{this.$message.error(error)this.collectVisible = false});},closeTreeModal(){this.$refs.Ttree.setCheckedNodes([])this.collectVisible = false},// 切换为列表显示listClick() {this.showFolder = false;this.showList = true;},// 切换为文件夹显示folderClick() {this.showList = false;this.showFolder = true;},handleExceed(){},//列表上的收藏按钮handleCollect(row){this.collectFile(row.id)},addFolder(){this.visible = true},//添加文件夹submitForm(){this.$refs["folderForm"].validate(valid => {if (valid) {const params = {userId:this.id,parentId:this.ZFolderParentId,folderName:this.folderForm.folderName}addFolder(params).then(response => {if(response.code === 200){this.$message.success('添加成功')this.getFolders()this.visible = false}else{console.log(response.msg)this.visible = false}}).catch(error=>{this.$message.error(error)this.visible = false});}});this.resetForm('folderForm')this.ZFolderParentId = 0},closeModel(){this.visible = falsethis.resetForm('folderForm')},downloadUrl(address){// 将绝对路径转换为可访问的URL// const relativePath = address.replace('file:///', ''); // 去除文件协议前缀// return `${relativePath}`;let a = document.createElement('a')a.href =addressa.click();},//根据用户ID获取我的文件数据getMyFile(){this.loading = trueconst userId  = this.id //用户IDconst params = {userId: userId,pageNum: this.queryParams.pageNum,pageSize:this.queryParams.pageSize,}getMyFiles(params).then(response => {if(response.code === 200){this.items = response.rowsthis.total = response.totalthis.items.forEach(item => {item.name = item.name.split("_")[0]+'.'+item.name.split(".")[1]})this.loading = falsethis.isCollected = false}else{console.log(response.msg)this.loading = false}}).catch(error=>{this.$message.error(error)this.loading = false});},//查询文件夹树getFolders(){const userId  = this.id //用户IDconst params = {userId: userId,}getFolders(params).then(response => {if(response.code === 200){this.data = this.handleTree(response.data, "folderId");}else{console.log(response.msg)}}).catch(error=>{this.$message.error(error)});},//收藏文件collectFile(fileId){if(this.data.length ===0){this.$message.warning('您还没有要收藏的文件夹，请新增')return}this.treeData = this.datathis.TfileId = fileIdthis.collectVisible = true},//查询我的收藏文件getCollectFile(){this.loading = trueconst userId  = this.id //用户IDconst params = {userId: userId,pageNum: this.queryParams.pageNum,pageSize:this.queryParams.pageSize,}getCollectFile(params).then(response => {if(response.code === 200){this.items = response.rowsthis.total = response.totalthis.isCollected = truethis.items.forEach(item => {item.name = item.name.split("_")[0]+'.'+item.name.split(".")[1]})this.loading = false}else{console.log(response.msg)this.loading = false}}).catch(error=>{this.$message.error(error)this.loading = false});},//公用文件查询getPublicFile(){this.loading = truegetPublicFile().then(response => {if(response.code === 200){this.items = response.rowsthis.total = response.totalthis.isCollected = falsethis.items.forEach(item => {item.name = item.name.split("_")[0]+'.'+item.name.split(".")[1]})this.loading = false}else{console.log(response.msg)this.loading = false}}).catch(error=>{this.$message.error(error)this.loading = false});},//文件上传beforeUpload(file) {const fileType = file.type;const validTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];const maxSize = 10 * 1024 * 1024; // 10MBif (!validTypes.includes(fileType)) {this.$message.error('只能上传xls或xlsx文件');return false;}if (file.size > maxSize) {this.$message.error('文件大小不能超过10MB');return false;}this.open = falsethis.loading = trueconst formData = new FormData();formData.append('file', file); // 将文件添加到FormData中formData.append('userName', this.nickName); // 用户名formData.append('userId', this.id); // 用户名formData.append('publicOrNot', this.publicOrNot); // 是否公有 默认0私有 1公有uploadFile(formData).then(response => {if(response.code === 200){this.$message.success('上传成功')this.getMyFile()this.loading = false}else{console.log(response.msg)this.loading = false}}).catch(error=>{this.$message.error(error)this.loading = false});return false; // 阻止el-upload组件自动上传},// 切换页码-卡片getCardList(data) {this.queryParams.pageNum = data.page;const start = (data.page - 1) * this.queryParams.pageSize;const end = data.page * this.queryParams.pageSize;this.currentPageItems = this.items.slice(start, end);},// 切换页码-列表handlePagination(page) {this.listParams.pageNum = page.page;this.getTableData();},// 根据当前页码和每页显示数量获取表格数据getTableData() {const start = (this.listParams.pageNum - 1) * this.listParams.pageSize;const end = start + this.listParams.pageSize;this.paginatedData = this.tableData.slice(start, end);this.currentPageData = [...this.paginatedData];this.listTotal = this.tableData.length;},},
};
</script><style lang="scss" scoped>
// ::v-deep .btn-prev {
//   margin-left: 110px;
// }
.fy {margin-top: 20px;display: flex;justify-content: flex-end;
}
.el-icon-plus {margin-left: 10px;
}
.el-icon-document {font-size: 20px;
}::v-deep .el-tree-node {margin-top: 10px;i {// color: #ffde4f;color: #d2be08;margin-right: 5px;}
}
.Tree {margin-top: 17px;
}
.medium-action {margin-top: 20px;
}
.table {margin-top: 10px;margin-left: 10px;
}
// ::v-deep .el-select {
//   height: 30px;
//   width: 130px;
//   margin-right: 15px;
//   .el-input__inner {
//     width: 130px;
//   }
// }
::v-deep .el-select .el-input__inner{width: 100px !important;
}.el-card {/*width: 550px;*//*height: 150px;*/
}
.home-main {width: 100%;padding: 10px;.top-card {}.tree {margin-top: 11px;.tree-left {overflow: auto;height: calc(100vh - 115px);/*width: 200px;*/}.tree-right {.card-top {height: 50px;/*width: 1500px;*/margin-left: 10px;i {// 小手图标cursor: pointer;margin-left: 10px;font-size: 25px;}}// 卡片列表.card-list {/*width: 1320px;*//*height: 530px;*//*height: calc(100vh - 260px);*/// overflow: auto;// overflow: hidden;background-color: #dddddd29;margin-top: 10px;margin-left: 10px;margin-bottom: 10px;display: flex;justify-content: normal;flex-direction: row;flex-wrap: wrap;.card-item {margin: 10px;background-color: #ffe06114;width: 145px;height: 150px;position: relative;border-radius: 8px;box-shadow: 2px 2px 2px #ddd;// 底部弹出的盒子.hover-box {opacity: 0;position: absolute;bottom: 0;width: 100%;height: 30px;.action {display: flex;justify-content: space-around;padding: 6px;}span {color: #fff;font-size: 15px;cursor: pointer;}}.gift-box {height: 75px;border-radius: 50%;display: flex;justify-content: center;align-items: center;img {width: 50px;height: 50px;justify-content: center;}}.title {margin-top: 10px;text-align: center;font-size: 16px;}.desc {padding: 20px;color: #999999;text-align: center;font-size: 14px;}}// 鼠标经过展示底部.card-item:hover .hover-box {transition: 0.7s;opacity: 1;scale:1}.card-item:hover {transition: 0.2s;opacity: 1;scale:1.1}// 鼠标经过字体变色.hover-box span:hover {/*color: #1e73f3;*/}span {font-size:13px;}}}}.options {/*margin-top: 10px;*//*margin-left: 10px;*//*margin-bottom: 10px;*/margin: 10px;// 点击选中效果.option-item.active {background-color: #e6f7ff;padding: 3px;}.option-item {cursor: pointer;margin-top: 20px;}.fonts {font-size: 15px;margin-left: 10px;margin-top: 10px;}}.tree-top{display: flex;justify-content: space-between;align-items: center;}.action{i{font-size: 17px;color:#fff}i:hover{cursor: pointer;color: #ee3575;}}
}::v-deep.self-form-item{margin-bottom: 0px;margin-top: -15px}.option-item:hover{color: #1890ff;}
.head-container{display: flex;justify-content: center;align-items: center;
}
::v-deep.el-tree {.el-tree-node__content:hover {background-color: #1890ff;.btns {display: inline-block !important;}}
}
</style>