前端资源管理

src/api/management/fileManage.js

@@ -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({

src/views/system/frontResourceManage/create.vue

@@ -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('.')
+			const fileName = fileList[0].name
-			this.formData.title = fileList[0].name.slice(0, devideIndex)
+			this.formData.fileName = fileName
-			this.ext = fileList[0].name.slice(devideIndex + 1)
+			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;

src/views/system/frontResourceManage/dirs.js

@@ -1,2 +1,15 @@
-export const directories = ['logo', 'recognition', 'txt', 'image', 'pdf']
+/**
-
+ * 前端管理的资源类型
+ */
+export const directories = [
+	{
+		// 项目logo
+		dir: 'logo',
+		label: 'Logo',
+	},
+	{
+		// 案例展示 (pdf)
+		dir: 'case',
+		label: '案例',
+	},
+]

src/views/system/frontResourceManage/edit.vue

@@ -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>

src/views/system/frontResourceManage/index.vue

@@ -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('文件路径已经复制到粘贴板')
 			})