init project
This commit is contained in:
ldj_willow
98
nladmin-ui/src/views/tools/storage/qiniu/form.vue
Normal file
98
nladmin-ui/src/views/tools/storage/qiniu/form.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" title="七牛云配置" append-to-body width="580px">
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="mini" label-width="110px">
|
||||
<el-form-item label="Access Key" prop="accessKey">
|
||||
<el-input v-model="form.accessKey" style="width: 95%" placeholder="accessKey，在安全中心，秘钥管理中查看" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Secret Key" prop="secretKey">
|
||||
<el-input v-model="form.secretKey" type="password" style="width: 95%;" placeholder="secretKey，在安全中心，秘钥管理中查看" />
|
||||
</el-form-item>
|
||||
<el-form-item label="空间名称" prop="bucket">
|
||||
<el-input v-model="form.bucket" style="width: 95%;" placeholder="存储空间名称作为唯一的 Bucket 识别符" />
|
||||
</el-form-item>
|
||||
<el-form-item label="外链域名" prop="host">
|
||||
<el-input v-model="form.host" style="width: 95%;" placeholder="外链域名，可自定义，需在七牛云绑定" />
|
||||
</el-form-item>
|
||||
<el-form-item label="存储区域">
|
||||
<el-select v-model="form.zone" placeholder="请选择存储区域">
|
||||
<el-option
|
||||
v-for="item in zones"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间类型" prop="type">
|
||||
<el-radio v-model="form.type" label="公开">公开</el-radio>
|
||||
<el-radio v-model="form.type" label="私有">私有</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialog = false">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get, update } from '@/api/tools/qiniu'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
zones: ['华东', '华北', '华南', '北美', '东南亚'], dialog: false,
|
||||
loading: false, form: { accessKey: '', secretKey: '', bucket: '', host: '', zone: '', type: '' },
|
||||
rules: {
|
||||
accessKey: [
|
||||
{ required: true, message: '请输入accessKey', trigger: 'blur' }
|
||||
],
|
||||
secretKey: [
|
||||
{ required: true, message: '请输入secretKey', trigger: 'blur' }
|
||||
],
|
||||
bucket: [
|
||||
{ required: true, message: '请输入空间名称', trigger: 'blur' }
|
||||
],
|
||||
host: [
|
||||
{ required: true, message: '请输入外链域名', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '空间类型不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
get().then(res => {
|
||||
this.form = res
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
update(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.$parent.crud.toQuery()
|
||||
this.loading = false
|
||||
this.dialog = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
193
nladmin-ui/src/views/tools/storage/qiniu/index.vue
Normal file
193
nladmin-ui/src/views/tools/storage/qiniu/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" />
|
||||
<!-- 工具栏 -->
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.key" clearable size="mini" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</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
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:action="qiNiuUploadApi"
|
||||
class="upload-demo"
|
||||
multiple
|
||||
>
|
||||
<el-button size="mini" type="primary">点击上传</el-button>
|
||||
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<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 prop="name" show-overflow-tooltip 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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="suffix" label="文件类型" @selection-change="crud.selectionChangeHandler" />
|
||||
<el-table-column prop="bucket" label="空间名称" />
|
||||
<el-table-column prop="size" label="文件大小" />
|
||||
<el-table-column prop="type" label="空间类型" />
|
||||
<el-table-column prop="updateTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { eForm, pagination, crudOperation, rrOperation, DateRangePicker },
|
||||
cruds() {
|
||||
return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }})
|
||||
},
|
||||
mixins: [presenter(), header(), crud()],
|
||||
data() {
|
||||
return {
|
||||
permission: {
|
||||
del: ['admin', 'storage:del']
|
||||
},
|
||||
title: '文件', dialog: false,
|
||||
icon: 'el-icon-refresh',
|
||||
url: '', headers: { 'Authorization': getToken() },
|
||||
dialogImageUrl: '', dialogVisible: false, fileList: [], files: [], newWin: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'qiNiuUploadApi'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
url(newVal, oldVal) {
|
||||
if (newVal && this.newWin) {
|
||||
this.newWin.sessionStorage.clear()
|
||||
this.newWin.location.href = newVal
|
||||
// 重定向后把url和newWin重置
|
||||
this.url = ''
|
||||
this.newWin = null
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.optShow.add = false
|
||||
this.crud.optShow.edit = false
|
||||
},
|
||||
methods: {
|
||||
// 七牛云配置
|
||||
doConfig() {
|
||||
const _this = this.$refs.form
|
||||
_this.init()
|
||||
_this.dialog = true
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
this.files.push({ uid, id })
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
if (this.files[i].uid === file.uid) {
|
||||
crudQiNiu.del([this.files[i].id]).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 刷新列表数据
|
||||
doSubmit() {
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = ''
|
||||
this.dialog = false
|
||||
this.crud.toQuery()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
|
||||
},
|
||||
// 下载文件
|
||||
download(id) {
|
||||
this.downloadLoading = true
|
||||
// 先打开一个空的新窗口，再请求
|
||||
this.newWin = window.open()
|
||||
crudQiNiu.download(id).then(res => {
|
||||
this.downloadLoading = false
|
||||
this.url = res.url
|
||||
}).catch(err => {
|
||||
this.downloadLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
// 同步数据
|
||||
synchronize() {
|
||||
this.icon = 'el-icon-loading'
|
||||
crudQiNiu.sync().then(res => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '数据同步成功',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
this.crud.toQuery()
|
||||
}).catch(err => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user