前端资源管理
This commit is contained in:
Yuan
parent
3bac0ad446
commit
18b49d772e
@ -27,6 +27,15 @@ export function saveFileInfo(data) {
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新文件标题 */
|
||||
export function updateFileTitle(data) {
|
||||
return request({
|
||||
url: `/api/minio/file/update`,
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除文件 */
|
||||
export function deleteFile(id) {
|
||||
return request({
|
||||
|
||||
@ -1,15 +1,5 @@
|
||||
<template>
|
||||
<el-dialog :visible="show" center :close-on-click-modal="false" title="新增文件" :before-close="doClose" destroy-on-close>
|
||||
<el-form ref="form" :model="formData" inline :rules="rules">
|
||||
<el-form-item label="目录" required prop="directory">
|
||||
<el-select v-model="formData.directory">
|
||||
<el-option v-for="dir in directories" :key="dir" :label="dir" :value="dir"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" required prop="title">
|
||||
<el-input v-model="formData.title"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="wrapper">
|
||||
<label v-show="showUpload" for="file">
|
||||
<el-card shadow="hover" class="card">
|
||||
@ -20,14 +10,30 @@
|
||||
<div v-show="!showUpload" class="preview" @mouseenter="showDelete = true" @mouseleave="showDelete = false">
|
||||
<el-card shadow="hover" class="card">
|
||||
<div class="file-type">{{ fileType }}</div>
|
||||
<div class="file-name">{{ formData.title }}.{{ ext }}</div>
|
||||
<div class="file-name">{{ formData.fileName }}</div>
|
||||
<div class="delete" v-show="showDelete" @click="handleDelete">
|
||||
<i class="el-icon-delete-solid"></i>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="path-display">文件存储路径: {{ formData.directory }}/{{ formData.title }}.{{ ext }}</div>
|
||||
<el-form ref="form" :model="formData" inline :rules="rules">
|
||||
<el-form-item label="类型" required prop="directory">
|
||||
<el-select v-model="formData.directory">
|
||||
<el-option v-for="item in directories" :key="item.dir" :label="item.label" :value="item.dir"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" required prop="title">
|
||||
<el-input v-model="formData.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件名" required prop="fileName">
|
||||
<el-input v-model="formData.fileName"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="!showUpload" class="path-display">
|
||||
<span>文件存储路径: </span>
|
||||
<code>{{ `${urlPrefix}/${formData.directory}/${formData.fileName}` }}</code>
|
||||
</div>
|
||||
<footer>
|
||||
<el-button type="primary" size="small" @click="handleUpload">上传</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
@ -42,6 +48,11 @@ import { checkIsExist, saveFileInfo } from '@/api/management/fileManage'
|
||||
export default {
|
||||
name: 'CreateFile',
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
urlPrefix() {
|
||||
return this.$store.state.user.ossUrl
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
@ -49,14 +60,15 @@ export default {
|
||||
showDelete: false,
|
||||
directories,
|
||||
fileType: '',
|
||||
ext: '',
|
||||
formData: {
|
||||
directory: '',
|
||||
title: '',
|
||||
fileName: '',
|
||||
},
|
||||
rules: {
|
||||
directory: [{ required: true, message: '请选择目录', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
fileName: [{ required: true, message: '请输入文件名', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -67,17 +79,16 @@ export default {
|
||||
doClose() {
|
||||
this.show = false
|
||||
this.handleDelete()
|
||||
this.formData.directory = ''
|
||||
this.formData.title = ''
|
||||
this.$emit('close')
|
||||
},
|
||||
onUploadChange(e) {
|
||||
const fileList = e.target.files
|
||||
if (!fileList.length) return
|
||||
this.showUpload = false
|
||||
const devideIndex = fileList[0].name.lastIndexOf('.')
|
||||
this.formData.title = fileList[0].name.slice(0, devideIndex)
|
||||
this.ext = fileList[0].name.slice(devideIndex + 1)
|
||||
const fileName = fileList[0].name
|
||||
this.formData.fileName = fileName
|
||||
const devideIndex = fileName.lastIndexOf('.')
|
||||
this.formData.title = fileName.slice(0, devideIndex)
|
||||
this.fileType = fileList[0].type.split('/').pop()
|
||||
},
|
||||
handleUpload() {
|
||||
@ -85,7 +96,7 @@ export default {
|
||||
const file = this.$refs.file.files[0]
|
||||
const params = {
|
||||
directory: this.formData.directory,
|
||||
fileName: `${this.formData.title}.${this.ext}`,
|
||||
fileName: this.formData.fileName,
|
||||
}
|
||||
const execUpload = () => {
|
||||
getUploadUrl({ ...params, method: 'PUT' }).then(res => {
|
||||
@ -122,6 +133,8 @@ export default {
|
||||
this.$refs.file.value = ''
|
||||
this.showUpload = true
|
||||
this.formData.title = ''
|
||||
this.formData.fileName = ''
|
||||
this.formData.directory = ''
|
||||
this.fileType = ''
|
||||
},
|
||||
},
|
||||
@ -142,6 +155,7 @@ footer {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -1,2 +1,15 @@
|
||||
export const directories = ['logo', 'recognition', 'txt', 'image', 'pdf']
|
||||
|
||||
/**
|
||||
* 前端管理的资源类型
|
||||
*/
|
||||
export const directories = [
|
||||
{
|
||||
// 项目logo
|
||||
dir: 'logo',
|
||||
label: 'Logo',
|
||||
},
|
||||
{
|
||||
// 案例展示 (pdf)
|
||||
dir: 'case',
|
||||
label: '案例',
|
||||
},
|
||||
]
|
||||
|
||||
62
src/views/system/frontResourceManage/edit.vue
Normal file
62
src/views/system/frontResourceManage/edit.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-dialog :visible="show" center :close-on-click-modal="false" title="编辑文件" :before-close="doClose" destroy-on-close>
|
||||
<el-form ref="form" :model="formData" inline :rules="rules">
|
||||
<el-form-item label="标题" prop="title" required>
|
||||
<el-input v-model="formData.title"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<footer>
|
||||
<el-button size="small" @click="confirmEdit" type="primary">确认</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
</footer>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateFileTitle } from '@/api/management/fileManage'
|
||||
export default {
|
||||
name: 'EditFile',
|
||||
emits: ['close'],
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
fileId: NaN,
|
||||
formData: {
|
||||
title: '',
|
||||
},
|
||||
rules: {
|
||||
title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow(row) {
|
||||
this.show = true
|
||||
console.log(row)
|
||||
this.formData.title = row.title
|
||||
this.fileId = row.id
|
||||
},
|
||||
doClose() {
|
||||
this.show = false
|
||||
this.formData.title = ''
|
||||
this.fileId = NaN
|
||||
this.$emit('close')
|
||||
},
|
||||
confirmEdit() {
|
||||
this.$refs.form
|
||||
.validate()
|
||||
.then(valid => {
|
||||
if (!valid) return Promise.reject()
|
||||
return updateFileTitle({ id: this.fileId, title: this.formData.title })
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('修改成功')
|
||||
this.doClose()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="file-manage">
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<CreateFile ref="createFile" @close="refreshList" />
|
||||
<EditFile ref="editFile" @close="refreshList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,10 +10,11 @@
|
||||
import { getFileList, deleteFile } from '@/api/management/fileManage'
|
||||
import { getUploadUrl } from '@/api/projectConfig'
|
||||
import CreateFile from './create'
|
||||
import EditFile from './edit'
|
||||
import { directories } from './dirs'
|
||||
export default {
|
||||
name: 'fileManage',
|
||||
components: { CreateFile },
|
||||
components: { CreateFile, EditFile },
|
||||
data() {
|
||||
return {
|
||||
pagerConfig: {
|
||||
@ -20,6 +22,7 @@ export default {
|
||||
pageIndex: 'pageNum',
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '100px',
|
||||
queryObject: {
|
||||
title: {
|
||||
type: 'text',
|
||||
@ -27,9 +30,12 @@ export default {
|
||||
},
|
||||
directory: {
|
||||
type: 'select',
|
||||
label: '目录:',
|
||||
label: '类型:',
|
||||
config: {
|
||||
data: directories.map(dir => ({ value: dir, label: dir })),
|
||||
data: directories.map(item => {
|
||||
const { dir: value, label } = item
|
||||
return { value, label }
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -42,23 +48,37 @@ export default {
|
||||
prop: 'title',
|
||||
},
|
||||
{
|
||||
title: '目录',
|
||||
title: '类型',
|
||||
prop: 'directory',
|
||||
formatter(row, col, val, idx) {
|
||||
return directories.find(_ => _.dir === val).label
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
prop: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '文件路径',
|
||||
formatter(row) {
|
||||
return `${row.directory}/${row.fileName}`
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '180',
|
||||
width: '240',
|
||||
buttons: [
|
||||
{
|
||||
name: '复制路径',
|
||||
handleClick: this.copyPath,
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
handleClick: this.openEdit,
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
name: '删除',
|
||||
handleClick: this.deleteFile,
|
||||
@ -99,9 +119,11 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
openEdit(idx, row) {
|
||||
this.$refs.editFile.doShow(row)
|
||||
},
|
||||
copyPath(idx, row) {
|
||||
const path = `${this.$store.state.user.ossUrl}/${row.directory}/${row.fileName}`
|
||||
console.log(path)
|
||||
navigator.clipboard.writeText(path).then(() => {
|
||||
this.$message.success('文件路径已经复制到粘贴板')
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user