Skip to content

F
file
Commit 0b8330a0 by wangyalan-git
Options

文档下载，搜索，最新上传，下载排行

parent 042e2321
Showing with 421 additions and 127 deletions
package-lock.json
......@@ -7860,6 +7860,11 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.27.0",
"resolved": "https://registry.npm.taobao.org/moment/download/moment-2.27.0.tgz?cache=0&sync_timestamp=1592517925956&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.27.0.tgz",
"integrity": "sha1-i/9OPiaiNiIN/j423nVrbrqgEF0="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
......
package.json
......@@ -12,6 +12,7 @@
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"js-cookie": "^2.2.1",
"moment": "^2.27.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......
src/api/doc.js 0 → 100644
import request from '@/utils/request'
// 万科后台_文件分页操作
export function getFileList (params) {
return request({
url: '/vankeFile/list',
method: 'get',
params
})
}
// 文件下载
export function downloadFile (params) {
return request({
url: '/file/downloadByFileId',
method: 'post',
params,
responseType: 'blob'
})
}
// 万科后台_文件类型分页操作
export function getTypeList (params) {
return request({
url: '/vankeFileType/list',
method: 'get',
params
})
}
src/assets/scss/common.scss
......@@ -13,6 +13,7 @@ ol,
dl {
list-style: none;
}
a:link,a:visited,a:hover { text-decoration:none;} //未访问：蓝色、无下划线
.page{
//display: flex;
width: 100%;
......@@ -29,5 +30,7 @@ dl {
.container{
width: 1200px;
margin: 0 auto;
padding: 4% 0;
//padding: 4% 0;
}
src/main.js
......@@ -5,7 +5,10 @@ import store from './store'
// 完整引入 Element
import ElementUI from 'element-ui'
import '@/assets/scss/common.scss'
import common from '@/utils/validate'
import moment from 'moment'
Vue.prototype.common = common
Vue.prototype.moment = moment
Vue.use(ElementUI)
Vue.config.productionTip = false
......
src/utils/date.js
// date.js
/* eslint-disable */
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
......
src/utils/request.js
......@@ -31,6 +31,11 @@ service.interceptors.response.use(
/**
* code为非200是抛错 可结合自己业务进行修改
*/
// 下载文件另外处理
const headers = response.headers
if (headers['content-type'] == 'application/octet-stream') {
return response.data
}
const res = response.data
if (res.code !== 200) {
Message({
......
src/utils/validate.js
/* eslint-disable */
export default {
// 获取分类label值
getCascaderObj(val, opt) {
getCascaderObj (val, opt) {
return val.map(function (value, index, array) {
for (var itm of opt) {
if (itm.id == value) {
opt = itm.children;
return itm.name;
opt = itm.children
return itm.name
}
}
return null;
return null
})
},
// 数组对象合并去重
removingDplicate(a, b) {
let ab = a.concat(b);
let obj = {};
let result = ab.reduce((cur,next) => {
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[]); //设置cur默认类型为数组，并且初始值为空的数组
console.log(result);
return result;
removingDplicate (a, b) {
const ab = a.concat(b)
const obj = {}
const result = ab.reduce((cur, next) => {
obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
return cur
}, []) // 设置cur默认类型为数组，并且初始值为空的数组
console.log(result)
return result
},
/* 合法uri*/
validateURL(textval) {
/* 合法uri */
validateURL (textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
},
/* 小写字母*/
validateLowerCase(str) {
/* 小写字母 */
validateLowerCase (str) {
const reg = /^[a-z]+$/
return reg.test(str)
},
/* 大写字母*/
validateUpperCase(str) {
/* 大写字母 */
validateUpperCase (str) {
const reg = /^[A-Z]+$/
return reg.test(str)
},
/* 大小写字母*/
validatAlphabets(str) {
/* 大小写字母 */
validatAlphabets (str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
}
src/views/home/index.vue
<template>
<div class="page">
<div class="container">
<el-row type="flex" justify="space-around">
<el-row type="flex" justify="space-between" style="margin-top: 20px;">
<el-col :span="11">
<div class="title">
<router-link :to="{path: 'search',query: {type: 1}}" class="title">
<p>热门下载 Popular download</p>
<p>更多 <i class="el-icon-arrow-right"></i></p>
</div>
</router-link>
<div>
<el-table
:show-header="false"
:data="tableData"
:data="hotFileList"
style="width: 100%">
<el-table-column
prop="address"
prop="name"
>
</el-table-column>
<el-table-column
prop="zip"
width="200">
prop="times">
<template slot-scope="scope">
<div>{{scope.row.createtime | formatTime}}</div>
</template>
</el-table-column>
<el-table-column
width="100">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="primary"
plain
@click.native.prevent="handleDown(scope.row)"
size="small">
立即下载
</el-button>
......@@ -34,29 +38,33 @@
</div>
</el-col>
<el-col :span="11">
<div class="title">
<p>热门下载 Popular download</p>
<router-link :to="{path: 'search',query: {type: 2}}" class="title">
<p>最新上传 The latest upload</p>
<p>更多 <i class="el-icon-arrow-right"></i></p>
</div>
</router-link>
<div>
<el-table
:show-header="false"
:data="tableData"
:data="newUploadList"
style="width: 100%">
<el-table-column
prop="address"
prop="name"
>
</el-table-column>
<el-table-column
prop="zip"
width="200">
prop="times">
<template slot-scope="scope">
<div>{{scope.row.createtime | formatTime}}</div>
</template>
</el-table-column>
<el-table-column
width="100">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
size="small">
@click.native.prevent="handleDown(scope.row)"
size="small"
type="primary"
plain>
立即下载
</el-button>
</template>
......@@ -70,66 +78,62 @@
</template>
<script>
import { getFileList, downloadFile } from '@/api/doc'
import moment from 'moment/moment'
export default {
name: 'index',
components: {},
data () {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
hotFileList: [],
newUploadList: []
}
},
mounted () {
this.init()
},
filters: {
formatTime (time) {
if (!time) {
return '--'
}
return moment(time).format('YYYY-MM-DD')
}
},
methods: {}
methods: {
init () {
getFileList({
pageNum: 1,
pageSize: 10,
isByDownloadTimes: 1
}).then(res => {
this.hotFileList = res.data.list
})
getFileList({
pageNum: 1,
pageSize: 10,
isByTime: 1
}).then(res => {
this.newUploadList = res.data.list
})
},
handleDown (row) {
downloadFile({ fileId: row.id }).then(res => {
console.log('res', res)
var blob = new Blob([res], { type: 'application/octet-stream' })
if (window.navigator.msSaveOrOpenBlob) { // msSaveOrOpenBlob方法返回bool值
navigator.msSaveBlob(blob, row.fileName)// 本地保存
} else {
var link = document.createElement('a')// a标签下载
link.href = window.URL.createObjectURL(blob)
link.download = row.fileName
link.click()
window.URL.revokeObjectURL(link.href)
}
})
}
}
}
</script>
......@@ -140,6 +144,7 @@ export default {
justify-content: space-between;
padding: 20px;
font-size: 16px;
color: #020202;
}
.title p:last-child {
......@@ -151,4 +156,7 @@ export default {
width: 500px;
/*border: 1px solid #4583F3;*/
}
.container{
margin-bottom: 50px;
}
</style>
src/views/layout/modules/Header.vue
<template>
<div class="navbar">
<div class="nav">
<div class="nav-left">
<router-link to="/" class="nav-left">
<img src="@/assets/images/ic_logo.png" alt="">
<p class="project-name">万科文档库平台</p>
</div>
</router-link>
<div class="search-module">
<ul>
<li class="checked">文档名称</li>
<li>文档类型</li>
<li>发布时间</li>
<li>创建者</li>
</ul>
<div>
<el-input
class="input-width"
placeholder="请输入内容"
v-model="searchName">
<!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<el-button @click ="search" type="primary" slot="append" icon="el-icon-search">搜索</el-button>
</el-input>
</div>
<!-- <div class="search-module">-->
<!-- <ul>-->
<!-- <li class="checked">文档名称</li>-->
<!-- <li>文档类型</li>-->
<!-- <li>发布时间</li>-->
<!-- <li>创建者</li>-->
<!-- </ul>-->
<!-- <div>-->
<!-- <el-input-->
<!-- class="input-width"-->
<!-- placeholder="请输入内容"-->
<!-- v-model="searchName">-->
<!-- &lt;!&ndash; <i slot="prefix" class="el-input__icon el-icon-search"></i>&ndash;&gt;-->
<!-- <el-button @click ="search" type="primary" slot="append" icon="el-icon-search">搜索</el-button>-->
<!-- </el-input>-->
<!-- </div>-->
<el-form :inline="true"
:model="listQuery"
ref="queryData"
size="small">
<el-form-item label="文档名称：">
<el-input v-model="listQuery.name"
placeholder="文档名称"></el-input>
</el-form-item>
<el-form-item label="发布时间：">
<el-date-picker
v-model="listQuery.queryTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="创建者：">
<el-input v-model="listQuery.adminName"
placeholder="创建者"></el-input>
</el-form-item>
<el-form-item label="文档类型：">
<el-select v-model="listQuery.typeId"
placeholder="请选择文档类型">
<el-option v-for="item in typeOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleSearchList()"
type="primary"
size="small"
style="margin-left: 20px;">
搜索
</el-button>
<el-button @click="handleResetSearch()"
size="small">
重 置
</el-button>
</el-form-item>
</el-form>
</div>
<div>
</div>
......@@ -30,17 +74,63 @@
</template>
<script>
import { getTypeList } from '@/api/doc'
const defaultListQuery = {
name: null,
typeId: null,
adminName: null,
queryTime: null
}
export default {
name: 'Header',
components: {},
data () {
return {
searchName: null
type: 1,
searchName: null,
typeOptions: [],
listQuery: Object.assign({}, defaultListQuery)
}
},
mounted () {
this.getTypeList()
},
methods: {
// 条件查询
handleSearchList () {
this.listQuery.pageNum = 1
this.$router.push({
path: 'search',
query: {
name: this.listQuery.name,
typeId: this.listQuery.typeId,
adminName: this.listQuery.adminName,
queryTime: this.listQuery.queryTime
}
})
},
// 表单重置
handleResetSearch () {
this.listQuery = Object.assign({}, defaultListQuery)
this.$router.push({
path: 'search',
query: {
name: this.listQuery.name,
typeId: this.listQuery.typeId,
adminName: this.listQuery.adminName,
queryTime: this.listQuery.queryTime
}
})
},
getTypeList () {
getTypeList().then(res => {
this.typeOptions = res.data.list
})
},
changeType (type) {
this.type = type
},
search () {
this.$router.push('/search')
}
......@@ -49,23 +139,27 @@ export default {
</script>
<style lang='scss' scoped>
.navbar{
.navbar {
border-bottom: 1px solid #ccc;
}
.project-name{
.project-name {
font-size: 20px;
margin-top: 5px;
color: #020202;
}
.nav {
display: flex;
/*justify-content: center;*/
align-items: center;
width:1200px;
width: 1200px;
margin: 0 auto;
padding: 4% 0;
position: relative;
}
.nav .nav-left {
margin-right: 50px;
}
......@@ -73,6 +167,7 @@ export default {
.search-module {
display: flex;
flex-direction: column;
text-align: left;
}
.search-module ul {
......@@ -96,7 +191,8 @@ export default {
background: #4583F3;
color: #ffffff;
}
.input-width{
.input-width {
/*border: 1px solid #4583F3;*/
}
</style>
......
src/views/login/index.vue
......@@ -155,13 +155,14 @@ export default {
.container {
position: relative;
width: 100%;
height: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: url("~@/assets/images/bg.png") no-repeat;
background-size: 100% 100%;
/*padding: 4% 0*/
}
.container .content {
......
src/views/search/index.vue
......@@ -5,44 +5,176 @@
<el-menu-item index="1">最新上传</el-menu-item>
<el-menu-item index="2">热门下载</el-menu-item>
</el-menu>
<el-row :gutter="20" class="row">
<el-col :span="6" v-for="(item,index) in 7" :key="index">
<el-row :gutter="20" class="row" v-if="list && list.length">
<el-col :span="6" v-for="(item,index) in list" :key="index">
<el-card :body-style="{ padding: '0px' }">
<div class="card_image">
<img src="@/assets/images/ECEL.png"
<img v-if="item.format === 'xlsx'" src="@/assets/images/ECEL.png"
class="image">
<img v-else-if="item.format === 'png'" src="@/assets/images/img.png"
class="image">
<img v-else-if="item.format === 'ppt'" src="@/assets/images/PPT.png"
class="image">
<img v-else-if="item.format === 'pdf'" src="@/assets/images/PDF.png"
class="image">
<img v-else-if="item.format === 'video' || 'mp4'" src="@/assets/images/VIDEO.png"
class="image">
<img v-else-if="item.format === 'word' || 'mp4'" src="@/assets/images/WORD.png"
class="image">
<img v-else-if="item.format === 'zip' || 'mp4'" src="@/assets/images/ZIP.png"
class="image">
<img v-else src="@/assets/images/defaultType.png"
class="image">
<div>
<p class="time">2020-05-21</p>
<p class="time">下载量： 123</p>
<p class="time">{{item.createtime | formatTime}}</p>
<p class="time">下载量： {{item.times}}</p>
</div>
</div>
<div style="padding: 14px;text-align: left;">
<span>实名制工作计划PPT模板</span>
<span>{{item.name}}</span>
<div class="bottom clearfix">
<time class="time">陈大大</time>
<el-button type="text" class="button">立即下载</el-button>
<time class="time">{{item.adminName}}</time>
<el-button type="text" class="button" @click="handleDown(item)">立即下载</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<div class="no_result" v-else>
暂无数据！
</div>
<div class="pagination-container">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[10,30,50]"
:total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import { getFileList, downloadFile } from '@/api/doc'
import moment from 'moment/moment'
// 列表查询参数默认值
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
name: '',
isByTime: null,
isByDownloadTimes: null
}
export default {
name: 'index',
components: {},
data () {
return {
activeIndex: '1'
activeIndex: '1',
listQuery: Object.assign({}, defaultListQuery),
list: [],
total: 0,
listLoading: false,
multipleSelection: []
}
},
mounted () {
/* eslint-disable */
if (this.$route.query.type == 1) {
this.activeIndex = '2'
} else {
this.activeIndex = '1'
}
this.getList()
},
methods: {
getFormat (value) {
if (!value) {
return '--'
}
const str = value.split('.')[1]
console.log('str', str)
return str
},
handleSelect (key) {
this.listQuery.pageNum = 1
this.activeIndex = key
this.getList()
},
handleSizeChange (val) {
this.listQuery.pageNum = 1
this.listQuery.pageSize = val
this.getList()
},
handleCurrentChange (val) {
this.listQuery.pageNum = val
this.getList()
},
// 请求数据
getList () {
this.listLoading = true
// 请求数据
if (this.activeIndex === '1') {
this.listQuery.isByTime = 1
this.listQuery.isByDownloadTimes = null
} else {
this.listQuery.isByTime = null
this.listQuery.isByDownloadTimes = 1
}
console.log('listQuery', this.listQuery)
getFileList(this.listQuery).then(res => {
this.listLoading = false
res.data.list.forEach(item => {
const str = this.getFormat(item.fileName)
item.format = str
})
this.list = res.data.list
this.total = res.data.total
})
},
handleDown (row) {
downloadFile({ fileId: row.id }).then(res => {
console.log('res', res)
var blob = new Blob([res], { type: 'application/octet-stream' })
if (window.navigator.msSaveOrOpenBlob) { // msSaveOrOpenBlob方法返回bool值
navigator.msSaveBlob(blob, row.fileName)// 本地保存
} else {
var link = document.createElement('a')// a标签下载
link.href = window.URL.createObjectURL(blob)
link.download = row.fileName
link.click()
window.URL.revokeObjectURL(link.href)
}
})
}
},
methods: {}
filters: {
formatTime (time) {
if (!time) {
return '--'
}
return moment(time).format('YYYY-MM-DD')
}
},
watch: {
$route: {
handler (value) {
console.log('this.$route.query.name',this.$route.query.name,this.$route.query)
this.listQuery.name = this.$route.query.name
this.listQuery.typeId = this.$route.query.typeId
this.listQuery.adminName = this.$route.query.adminName
this.listQuery.queryTime = this.$route.query.queryTime
this.listQuery.pageNum = 1
this.getList()
},
deep: true
}
}
}
</script>
......@@ -53,7 +185,8 @@ export default {
width: 100%;
height: 300px;
}
.card_image img{
.card_image img {
width: 100px;
height: 100px;
text-align: center;
......@@ -109,7 +242,17 @@ export default {
.row {
margin-top: 30px;
}
.row>div{
.row > div {
margin-bottom: 20px;
}
.pagination-container {
margin: 50px 0;
text-align: right;
}
.no_result{
margin: 100px auto;
color: #999;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment