Skip to content

Z
zys-ui
提交 1f95f6be authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

实现内部资源和第三方资源的静态页面

上级 1b4de9f4
隐藏空白字符变更
内嵌 并排
正在显示 包含 499 行增加 和 17 行删除
src/assets/styles/index.scss
浏览文件 @ 1f95f6be
......@@ -122,6 +122,8 @@ aside {
//main-container全局样式
.app-container {
padding: 20px;
height: calc(100vh - 84px);
overflow: auto;
}
.components-container {
......
src/layout/components/AppMain.vue
浏览文件 @ 1f95f6be
......@@ -10,20 +10,20 @@
</template>
<script>
import iframeToggle from "./IframeToggle/index"
import iframeToggle from "./IframeToggle/index";
export default {
name: 'AppMain',
name: "AppMain",
components: { iframeToggle },
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
return this.$store.state.tagsView.cachedViews;
},
key() {
return this.$route.path
}
}
}
return this.$route.path;
},
},
};
</script>
<style lang="scss" scoped>
......
src/libs/qiwen/globalFunction/file.js
浏览文件 @ 1f95f6be
......@@ -172,18 +172,20 @@ const fileFunction = {
* 根据文件扩展名设置文件图片
* @param {object} file 文件信息
*/
setFileImg(file) {
setFileImg(file,key='extendName') {
// debugger
console.log(file,key);
console.log(file[key]);
if (file.isDir === 1) {
// 文件夹
return fileImgMap.get('dir')
} else if (fileImgMap.has(file.extendName.toLowerCase())) {
} else if (fileImgMap.has(file[key].toLowerCase())) {
// 可以识别文件类型的文件
return fileImgMap.get(file.extendName.toLowerCase())
return fileImgMap.get(file[key].toLowerCase())
} else if (
Number(router.currentRoute.query.fileType) !== 6 &&
['jpg', 'png', 'jpeg', 'gif', 'mp4'].includes(
file.extendName.toLowerCase()
file[key].toLowerCase()
)
) {
// 图片、视频类型，直接显示缩略图
......
src/views/resource/components/searchBar/index.vue 0 → 100644
浏览文件 @ 1f95f6be
<template>
<div class="search">
<div class="tab">
<div
:class="['tab-item', activeTab == item ? 'active' : '']"
@click="handleClickTab(item)"
v-for="(item, index) in tabs"
:key="index"
>
{{ item }}
</div>
</div>
<div class="search-input">
<el-input
placeholder="输入关键词搜索，马上在线阅读"
v-model="keyword"
clearable
></el-input>
<el-button icon="el-icon-search" type="primary" @click="handleSearch">搜索 </el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: ["全部", "期刊", "博硕士", "会议", "报纸", "年鉴"],
activeTab: "全部",
keyword: "",
};
},
methods: {
handleClickTab(item) {
this.activeTab = item;
},
handleSearch(){
this.$emit('search',this.keyword)
}
},
};
</script>
<style lang="scss" scoped>
.search {
background-color: #fff;
padding: 20px;
border-radius: 8px;
.tab {
display: flex;
margin-bottom: 20px;
.tab-item {
margin-right: 20px;
padding: 4px 20px;
cursor: pointer;
&:hover {
color: $theme-blue;
font-weight: bold;
}
}
.active {
background-color: rgba($color: $theme-blue, $alpha: 0.1);
border-radius: 4px;
color: $theme-blue;
font-weight: bold;
position: relative;
&::after {
position: absolute;
width: 0;
height: 0;
content: "";
border: 8px solid rgba($color: $theme-blue, $alpha: 0.1);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}
}
}
.search-input {
display: flex;
.el-button {
margin-left: 20px;
}
::v-deep .el-input {
input {
background-color: #f7f8fa;
border: none;
}
}
}
}
</style>
src/views/resource/components/table/index.vue 0 → 100644
浏览文件 @ 1f95f6be
<template>
<div class="table">
<div class="mb8">
<el-button
type="primary"
plain
size="mini"
:disabled="multiple"
@click.native="handleMultiCollect"
>批量收藏</el-button
>
<el-button
type="primary"
plain
size="mini"
:disabled="multiple"
@click.native="handleMultiDownload"
>批量下载</el-button
>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</div>
<el-table
v-loading="loading"
:data="fileList.records"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="文件名称"
align="center"
prop="name"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="fileName">
<el-link @click="handleOpenFile(scope.row)">
<img
:src="$file.setFileImg(scope.row, 'showType')"
style="width: 20px; height: 20px; margin-right: 4px"
/>
{{ scope.row.name }}
</el-link>
</div>
</template>
</el-table-column>
<el-table-column
label="作者"
align="center"
prop="author"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
show-overflow-tooltip
label="机构"
prop="organize"
align="center"
>
</el-table-column>
<el-table-column
label="文件大小"
align="center"
prop="fileSize"
show-overflow-tooltip
>
<template slot-scope="scope">
<span>{{ $file.calculateFileSize(scope.row.fileSize) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-link
type="primary"
icon="el-icon-star-off"
@click="handleCollect(scope.row)"
>
收藏
</el-link>
<el-divider direction="vertical"></el-divider>
<el-link
type="primary"
icon="el-icon-view"
@click="handleOpenFile(scope.row)"
>
预览
</el-link>
<el-divider direction="vertical"></el-divider>
<el-link
target="_blank"
type="primary"
icon="el-icon-download"
:href="$file.getDownloadFilePath(scope.row)"
:download="scope.row.fileName + '.' + scope.row.extendName"
>
下载
</el-link>
</template>
</el-table-column>
</el-table>
<pagination
v-show="fileList.total > 0"
:total="fileList.total"
:page.sync="queryParams.currentPage"
:limit.sync="queryParams.pageCount"
@pagination="getList"
/>
<!-- 多选文件下载，页面隐藏 -->
<a :href="batchDownloadLink" ref="batchDownloadRef"></a>
</div>
</template>
<script>
import { fileList } from "../../mockData";
export default {
data() {
return {
// 遮罩层
loading: false,
// 选中数组
selectedFiles: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
// fileList: [],
fileList,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
currentPage: 1,
pageCount: 10,
fileName: "", //文件名称
shareStatus: "", //分享状态
},
// 批量取消的弹窗可见性
multiCancelVisible: false,
};
},
methods: {
// 多选框选中数据
handleSelectionChange(selection) {
this.selectedFiles = selection;
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 点击打开文件
handleOpenFile(file) {
this.$file.handleFileNameClickNew(file);
},
// 批量收藏
handleMultiCollect(){},
// 点击收藏
handleCollect(file) {},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-link--inner {
display: flex;
align-items: center;
}
.table {
margin: 40px 0 20px;
padding: 20px;
background-color: #fff;
border-radius: 4px;
}
</style>
src/views/resource/external/index.vue
浏览文件 @ 1f95f6be
<template>
<div>外部资源</div>
<div class="app-container container">
<SearchBar @search="handleRearch" />
<Table />
</div>
</template>
<script></script>
<style lang="scss"></style>
<script>
import SearchBar from "../components/searchBar/index.vue";
import Table from "../components/table/index.vue";
export default {
components: {
SearchBar,
Table,
},
methods: {
handleRearch(keyword) {
console.log("search",keyword);
},
},
};
</script>
<style lang="scss" scoped>
.container {
background-color: #f7f8fa;
padding: 20px 40px;
}
</style>
src/views/resource/internal/index.vue
浏览文件 @ 1f95f6be
<template>
<div>内部资源</div>
<div class="app-container container">
<SearchBar @search="handleRearch" />
<Table />
</div>
</template>
<script></script>
<style lang="scss"></style>
<script>
import SearchBar from "../components/searchBar/index.vue";
import Table from "../components/table/index.vue";
export default {
components: {
SearchBar,
Table,
},
methods: {
handleRearch(keyword) {
console.log("search",keyword);
},
},
};
</script>
<style lang="scss" scoped>
.container {
background-color: #f7f8fa;
padding: 20px 40px;
}
</style>
src/views/resource/mockData.js 0 → 100644
浏览文件 @ 1f95f6be
export const fileList = {
"notEmpty": true,
"pageNo": "1",
"pageSize": "10",
"records": [
{
"collected": false,
"createTime": "2020-07-12 13:28",
"docSType": "s_type_kbase",
"fileSize": 5296092,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d279b405b4",
"name": "庆祝中国共产党成立95周年和红军长征胜利80周年广西美术、书法、摄影作品展作品选",
"organize": "文娱周刊",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=1317e284fc424727a30a562f87593d17",
"year": "2016"
},
{
"author": "霍秀红;王娜",
"collected": false,
"createTime": "2020-07-11 14:35",
"docSType": "s_type_kbase",
"fileSize": 129776,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d365140bbb",
"name": "改革开放以来中国共产党对公共管理思想的理论创新",
"organize": "江苏大学马克思主义学院;南京旅游职业学院思政部;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=cf53a0dcd591471bb062b97c8a2c3184",
"year": "2014"
},
{
"author": "王军",
"collected": false,
"createTime": "2020-07-11 01:07",
"docSType": "s_type_kbase",
"fileSize": 2419124,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d36d760bf5",
"name": "让党的旗帜在注册税务师行业高高飘扬——在中国共产党中国注册税务师行业委员会、中国注册税务师同心服务团成立暨中税协第五次全国会员代表大会开幕式上的讲话",
"organize": "国家税务总局;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=f0d3a13748154b71802ba36beeb922ae",
"year": "2013"
},
{
"author": "孙应帅",
"collected": false,
"createTime": "2020-07-11 00:36",
"docSType": "s_type_kbase",
"fileSize": 81150,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d220b50354",
"name": "中国共产党领导方式和手段的坚持与改善",
"organize": "中国社会科学院马克思主义研究院马克思恩格斯思想研究室;北京大学;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=5f616fb0a82a4a7a9ad4351f514aea4b",
"year": "2013"
},
{
"author": "熊辉;任俊宏",
"collected": false,
"createTime": "2020-07-11 00:35",
"docSType": "s_type_kbase",
"fileSize": 66639,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d3222b0a0a",
"name": "改革开放以来中国共产党生态文明思想的演进",
"organize": "湘潭大学毛泽东思想研究中心;湘潭大学哲学与历史文化学院;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=9bd2dcea8519421cbc9baa1eb0a3e0d0",
"year": "2013"
},
{
"author": "高广宏;方国辉",
"collected": false,
"createTime": "2020-07-11 00:01",
"docSType": "s_type_kbase",
"fileSize": 268468,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d2f1b808e4",
"name": "从历史周期率看中国共产党执政能力提高",
"organize": "解放军后勤学院;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=b683af46e25d43528800b454ed33a8cc",
"year": "2013"
},
{
"author": "王峰;郭婧婧",
"collected": false,
"createTime": "2020-07-10 22:09",
"docSType": "s_type_kbase",
"fileSize": 82354,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d368960bd2",
"name": "对“关于公布战绩应用实数”电报的思考——兼谈抗战时期中国共产党宣传策略的转变",
"organize": "延安大学政法学院;榆林学院;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=707f2ef6d1eb4f0abad89bc8de2038be",
"year": "2012"
},
{
"author": "刘亚政",
"collected": false,
"createTime": "2020-07-10 20:54",
"docSType": "s_type_kbase",
"fileSize": 105083,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d2c1fb07a6",
"name": "论中国共产党在改革开放新时期的伟大创造",
"organize": "吉林省社会科学院;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=97ddffacb9344e2aadf1508d96c7849c",
"year": "2011"
},
{
"author": "段娟",
"collected": false,
"createTime": "2020-07-10 20:49",
"docSType": "s_type_kbase",
"fileSize": 141907,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d2e1280874",
"name": "中国共产党推进区域分工协作的探索及其启示——以新中国成立后至改革开放前为研究时限",
"organize": "中国社会科学院当代中国研究所;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=12c64183f9524e339af6813c95e82411",
"year": "2011"
},
{
"author": "蒋霞;郭华茹",
"collected": false,
"createTime": "2020-07-10 17:40",
"docSType": "s_type_kbase",
"fileSize": 73164,
"fileType": "pdf",
"id": "2c98e4068479d17c018479d3390a0a9f",
"name": "中国共产党执政六十年来对改善民生的探索",
"organize": "江苏工业学院法学与公共管理学院;",
"showType": "pdf",
"url": "http://222.85.214.245:9559/ls/public/stream?randomCode=0ef6edeb210649909eb38b9a8d64e1fb",
"year": "2009"
}
],
"total": 26,
"totalPages": 3
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论