parent
8ba50079cc
commit
e0cbcb37d0
18 changed files with 2466 additions and 2073 deletions
@ -1,237 +1,283 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>站点选择</label> |
||||
<el-select v-model="form.site" @change="initData"> |
||||
<el-option label="不限" value=""></el-option> |
||||
<el-option |
||||
v-for="item in sites" |
||||
:key="item.id" |
||||
:label="item.siteName" |
||||
:value="item.siteName"> |
||||
</el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>文件类型</label> |
||||
<el-select v-model="form.type" @change="initData"> |
||||
<el-option |
||||
v-for="item in types" |
||||
:key="item.name" |
||||
:label="item.name" |
||||
:value="item.name"> |
||||
</el-option> |
||||
</el-select> |
||||
</li> |
||||
</ul> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>站点选择</label> |
||||
<el-select v-model="form.site" |
||||
@change="initData"> |
||||
<el-option label="不限" |
||||
value=""></el-option> |
||||
<el-option v-for="item in sites" |
||||
:key="item.id" |
||||
:label="item.siteName" |
||||
:value="item.siteName"> |
||||
</el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>文件类型</label> |
||||
<el-select v-model="form.type" |
||||
@change="initData"> |
||||
<el-option v-for="item in types" |
||||
:key="item.name" |
||||
:label="item.name" |
||||
:value="item.name"> |
||||
</el-option> |
||||
</el-select> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" @change="initData"> |
||||
<el-option |
||||
v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
<el-select v-model="field" |
||||
@change="initData"> |
||||
<el-option v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input> |
||||
<el-input class="keyword" |
||||
:placeholder="'请输入' + keywords.find(e => e.id === field).name" |
||||
v-model.trim="keyword" |
||||
clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth @click="batchDel">删除</el-button> |
||||
<el-button v-auth |
||||
@click="batchDel">删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table ref="table" :data="list" class="table" header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="50" align="center" :reserve-selection="true" :selectable="row => !row.quote"></el-table-column> |
||||
<el-table-column type="index" width="60" label="ID"></el-table-column> |
||||
<el-table-column prop="site" label="站点" min-width="180"></el-table-column> |
||||
<el-table-column prop="quote" label="文章名称" min-width="180" show-overflow-tooltip> |
||||
<el-table ref="table" |
||||
:data="list" |
||||
class="table" |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange" |
||||
row-key="id"> |
||||
<el-table-column type="selection" |
||||
width="50" |
||||
align="center" |
||||
:reserve-selection="true" |
||||
:selectable="row => !row.quote"></el-table-column> |
||||
<el-table-column type="index" |
||||
width="60" |
||||
label="ID"></el-table-column> |
||||
<el-table-column prop="site" |
||||
label="站点" |
||||
min-width="180"></el-table-column> |
||||
<el-table-column prop="quote" |
||||
label="文章名称" |
||||
min-width="180" |
||||
show-overflow-tooltip> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.quote || '--' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="fileName" label="名称" min-width="180" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="type" label="文件类型" min-width="80"></el-table-column> |
||||
<el-table-column prop="format" label="格式" min-width="80"></el-table-column> |
||||
<el-table-column prop="fileSize" label="大小" min-width="80"> |
||||
<el-table-column prop="fileName" |
||||
label="名称" |
||||
min-width="180" |
||||
show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="type" |
||||
label="文件类型" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="format" |
||||
label="格式" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="fileSize" |
||||
label="大小" |
||||
min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ (scope.row.fileSize / 1000).toFixed(2) }}kb |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="createDate" label="上传时间" min-width="150"></el-table-column> |
||||
<el-table-column prop="uploader" label="上传人" min-width="100"></el-table-column> |
||||
<el-table-column prop="deleted" label="是否使用" min-width="100"> |
||||
<el-table-column prop="createDate" |
||||
label="上传时间" |
||||
min-width="150"></el-table-column> |
||||
<el-table-column prop="uploader" |
||||
label="上传人" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="deleted" |
||||
label="是否使用" |
||||
min-width="100"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.quote ? '是' : '否' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="150"> |
||||
<el-table-column label="操作" |
||||
width="150"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="show(scope.row, 'edit')">查看</el-button> |
||||
<el-button v-auth type="text" :disabled="scope.row.quote !== ''" @click="del(scope.row)">删除</el-button> |
||||
<el-button v-auth type="text" @click="download(scope.row)">下载</el-button> |
||||
<el-button type="text" |
||||
@click="show(scope.row, 'edit')">查看</el-button> |
||||
<el-button v-auth |
||||
type="text" |
||||
:disabled="scope.row.quote !== ''" |
||||
@click="del(scope.row)">删除</el-button> |
||||
<el-button v-auth |
||||
type="text" |
||||
@click="download(scope.row)">下载</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination> |
||||
<el-pagination background |
||||
layout="total, prev, pager, next" |
||||
:total="total" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState } from 'vuex' |
||||
import util from '@/libs/util' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
sites: [], |
||||
types: [ |
||||
{ |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
name: '图片' |
||||
}, |
||||
{ |
||||
name: '视频' |
||||
}, |
||||
{ |
||||
name: '文档' |
||||
} |
||||
], |
||||
field: 'fileName', |
||||
keywords: [ |
||||
{ |
||||
id: 'fileName', |
||||
name: '文件名称' |
||||
}, |
||||
{ |
||||
id: 'uploader', |
||||
name: '上传人' |
||||
}, |
||||
{ |
||||
id: 'quote', |
||||
name: '文章名称' |
||||
} |
||||
], |
||||
keyword: '', |
||||
form: { |
||||
site: '', |
||||
type: '不限' |
||||
}, |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
list: [], |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('auth', [ |
||||
'btns' |
||||
]) |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
data () { |
||||
return { |
||||
sites: [], |
||||
types: [ |
||||
{ |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
name: '图片' |
||||
}, |
||||
{ |
||||
name: '附件管理' |
||||
name: '视频' |
||||
}, |
||||
{ |
||||
name: '文档' |
||||
} |
||||
], |
||||
field: 'fileName', |
||||
keywords: [ |
||||
{ |
||||
id: 'fileName', |
||||
name: '文件名称' |
||||
}, |
||||
{ |
||||
id: 'uploader', |
||||
name: '上传人' |
||||
}, |
||||
{ |
||||
id: 'quote', |
||||
name: '文章名称' |
||||
} |
||||
]) |
||||
], |
||||
keyword: '', |
||||
form: { |
||||
site: '', |
||||
type: '不限' |
||||
}, |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
list: [], |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('auth', [ |
||||
'btns' |
||||
]) |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '附件管理' |
||||
} |
||||
]) |
||||
this.getData() |
||||
this.getSite() |
||||
}, |
||||
methods: { |
||||
getData () { |
||||
const { form } = this |
||||
this.$post(this.api.listByPage, { |
||||
page: this.page, |
||||
limit: this.pageSize, |
||||
quote: this.field === 'quote' ? this.keyword : '', |
||||
fileName: this.field === 'fileName' ? this.keyword : '', |
||||
uploader: this.field === 'uploader' ? this.keyword : '', |
||||
site: form.site, |
||||
type: form.type === '不限' ? '' : form.type |
||||
}).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => { }) |
||||
}, |
||||
// 获取站点列表 |
||||
getSite () { |
||||
this.$post(this.api.site, { |
||||
page: 1, |
||||
limit: 1000, |
||||
siteName: '' |
||||
}).then(({ data }) => { |
||||
this.sites = Util.getSite(data.records) |
||||
}).catch(e => { }) |
||||
}, |
||||
initData () { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
this.getSite() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
const { form } = this |
||||
this.$post(this.api.listByPage, { |
||||
page: this.page, |
||||
limit: this.pageSize, |
||||
quote: this.field === 'quote' ? this.keyword : '', |
||||
fileName: this.field === 'fileName' ? this.keyword : '', |
||||
uploader: this.field === 'uploader' ? this.keyword : '', |
||||
site: form.site, |
||||
type: form.type === '不限' ? '' : form.type |
||||
}).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => {}) |
||||
}, |
||||
// 获取站点列表 |
||||
getSite() { |
||||
this.$post(this.api.site, { |
||||
page: 1, |
||||
limit: 1000, |
||||
siteName: '' |
||||
}).then(({ data }) => { |
||||
this.sites = util.getSite(data.records) |
||||
}).catch(e => {}) |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 查看 |
||||
show(row) { |
||||
const format = row.format |
||||
window.open((util.isDoc(format) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + row.url) |
||||
}, |
||||
// 下载 |
||||
download(row) { |
||||
util.downloadFile(row.fileName, row.url) |
||||
}, |
||||
// 删除 |
||||
del(row) { |
||||
// 查看 |
||||
show (row) { |
||||
const format = row.format |
||||
window.open((Util.isDoc(format) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + row.url) |
||||
}, |
||||
// 下载 |
||||
download (row) { |
||||
Util.downloadFile(row.fileName, row.url) |
||||
}, |
||||
// 删除 |
||||
del (row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(this.api.delFile, Util.rsa([row.id])).then(res => { |
||||
Util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$del(`${this.api.delFile}`, [row.id]).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.$del(this.api.delFile, Util.rsa(list.map(e => e.id))).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
Util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$del(`${this.api.delFile}`, list.map(e => e.id)).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData() |
||||
}, |
||||
} |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
Util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.page = val |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue