open-source/eladmin-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Elune
2019-12-21 15:44:47 +08:00
parent 4ccb6cb81c
commit 2bc97e3158
7 changed files with 141 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/tools/storage/qiniu/index.vue
View File

@@ -4,51 +4,38 @@
<eForm ref="form" />
<!-- 工具栏 -->
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker
v-model="query.c"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 上传 -->
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
<!-- 同步 -->
<el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步数据</el-button>
<!-- 配置 -->
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-s-tools"
@click="doConfig"
>七牛配置</el-button>
<!-- 多选删除 -->
<el-button
:loading="delAllLoading"
:disabled="data.length === 0 || $refs.table.selection.length === 0"
class="filter-item"
size="mini"
type="danger"
icon="el-icon-delete"
@click="beforeDelAllMethod"
>删除</el-button>
<!-- 导出 -->
<el-button
:loading="downloadLoading"
size="mini"
class="filter-item"
type="warning"
icon="el-icon-download"
@click="downloadMethod"
>导出</el-button>
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker
v-model="query.c"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission">
<template slot="left">
<!-- 上传 -->
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传</el-button>
<!-- 同步 -->
<el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步</el-button>
<!-- 配置 -->
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-s-tools"
@click="doConfig"
>配置</el-button>
</template>
</crudOperation>
<!-- 文件上传 -->
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSubmit">
<el-upload
@@ -69,67 +56,52 @@
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="loading" :data="data" style="width: 100%;">
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" label="文件名">
<el-table-column v-if="columns.visible('name')" prop="name" :show-overflow-tooltip="true" label="文件名">
<template slot-scope="scope">
<a href="JavaScript:;" class="el-link el-link--primary" target="_blank" type="primary" @click="download(scope.row.id)">{{ scope.row.key }}</a>
<a href="JavaScript:" class="el-link el-link--primary" target="_blank" type="primary" @click="download(scope.row.id)">{{ scope.row.key }}</a>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="suffix" label="文件类型" />
<el-table-column prop="bucket" label="空间名称" />
<el-table-column prop="size" label="文件大小" />
<el-table-column prop="type" label="空间类型" />
<el-table-column width="180px" prop="updateTime" label="创建日期">
<el-table-column v-if="columns.visible('suffix')" :show-overflow-tooltip="true" prop="suffix" label="文件类型" @selection-change="crud.selectionChangeHandler" />
<el-table-column v-if="columns.visible('bucket')" prop="bucket" label="空间名称" />
<el-table-column v-if="columns.visible('size')" prop="size" label="文件大小" />
<el-table-column v-if="columns.visible('type')" prop="type" label="空间类型" />
<el-table-column v-if="columns.visible('updateTime')" prop="updateTime" label="创建日期">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100px" align="center" fixed="right">
<template slot-scope="scope">
<el-popover
:ref="scope.row.id"
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
<pagination />
</div>
</div>
</template>
<script>
import crud from '@/mixins/crud'
import crudQiNiu from '@/api/tools/qiniu'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import eForm from './form'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }})
export default {
components: { eForm },
mixins: [crud],
components: { eForm, pagination, crudOperation, rrOperation },
mixins: [presenter(defaultCrud), header(), crud()],
data() {
return {
title: '文件',
crudMethod: { ...crudQiNiu },
permission: {
del: ['admin', 'storage:del']
},
title: '文件', dialog: false,
icon: 'el-icon-refresh',
url: '', headers: { 'Authorization': getToken() }, dialog: false,
url: '', headers: { 'Authorization': getToken() },
dialogImageUrl: '', dialogVisible: false, fileList: [], files: [], newWin: null
}
},
@@ -149,12 +121,11 @@ export default {
}
}
},
created() {
this.crud.optShow.add = false
this.crud.optShow.edit = false
},
methods: {
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/qiNiuContent'
return true
},
// 七牛云配置
doConfig() {
const _this = this.$refs.form
@@ -169,7 +140,7 @@ export default {
handleBeforeRemove(file, fileList) {
for (let i = 0; i < this.files.length; i++) {
if (this.files[i].uid === file.uid) {
this.crudMethod.del(this.files[i].id).then(res => {})
crudQiNiu.del([this.files[i].id]).then(res => {})
return true
}
}
@@ -184,19 +155,19 @@ export default {
this.dialogVisible = false
this.dialogImageUrl = ''
this.dialog = false
this.init()
this.crud.toQuery()
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
this.notify(msg.message, 'error')
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
},
// 下载文件
download(id) {
this.downloadLoading = true
// 先打开一个空的新窗口，再请求
this.newWin = window.open()
this.crudMethod.download(id).then(res => {
crudQiNiu.download(id).then(res => {
this.downloadLoading = false
this.url = res.url
}).catch(err => {
@@ -207,7 +178,7 @@ export default {
// 同步数据
synchronize() {
this.icon = 'el-icon-loading'
this.crudMethod.sync().then(res => {
crudQiNiu.sync().then(res => {
this.icon = 'el-icon-refresh'
this.$message({
showClose: true,
@@ -215,7 +186,7 @@ export default {
type: 'success',
duration: 1500
})
this.toQuery()
this.crud.toQuery()
}).catch(err => {
this.icon = 'el-icon-refresh'
console.log(err.response.data.message)