资源上传

src/libs/globalFunction/file.js

@@ -83,6 +83,9 @@ const fileFunction = {
 			row.shareBatchNum == null ? '' : row.shareBatchNum
 		}&extractionCode=${row.extractionCode == null ? '' : row.extractionCode}&admin=true`
 	},
+	getDownloadFilePath3(row) {
+		return `${config.baseContext}/resourceFile/downloadfile?userFileIds=${row.fileId}`
+	},
 	/**
 	 * 获取 Onlyoffice 文件创建路径
 	 * @param {object} row

src/views/myResource/file/box/uploadFile/Box.vue

@@ -151,7 +151,7 @@
 
 	const fileStatusText = ref({
 		success: '上传成功',
-		error: 'error',
+		error: '上传失败',
 		uploading: '上传中',
 		paused: '暂停中',
 		waiting: '等待中'

src/views/myResources/UploadModal.vue

@@ -29,7 +29,7 @@
 			</div>
 			<span class="text" v-show="!pasteImg.src"> 截图粘贴或将文件拖拽至此区域上传 </span>
 			<UploadOutlined class="upload-icon" v-show="pasteImg.src" @click="handleUploadPasteImg" />
-			<DeleteOutlined class="delete-icon" v-show="pasteImg.src" @click="handleDeletePasteImg" />
+			<DeleteOutlined class="delete-icon" @click="handleDeletePasteImg" />
 			<CloseCircleOutlined class="close-icon" @click="dropBoxShow = false" />
 		</uploader-drop>
 
@@ -44,7 +44,7 @@
 					</div>
 
 					<transition name="collapse">
-						<ul class="file-list">
+						<ul class="file-list" v-show="!collapse">
 							<li
 								v-for="file in props.fileList"
 								:key="file.id"
@@ -381,11 +381,14 @@
 </script>
 
 <style lang="less" scoped>
+	@import '@/style/myResource/varibles.less';
 	.upload-btn-wrapper {
 		display: flex;
 		align-items: center;
 	}
-
+	.uploader-file {
+		width: 560px;
+	}
 	.select-file-btn {
 		display: none;
 	}
@@ -454,7 +457,9 @@
 			color: #999;
 		}
 	}
-
+	.uploader-app {
+		width: 560px;
+	}
 	.file-panel {
 		width: 100%;
 		margin-top: 15px;
@@ -482,21 +487,51 @@
 		}
 
 		.file-list {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-			max-height: 200px;
+			position: relative;
+			height: 240px;
+			overflow-x: hidden;
 			overflow-y: auto;
+			background-color: #fff;
+			font-size: 12px;
+			list-style: none;
+			&::-webkit-scrollbar {
+				width: 6px;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: @scrollbar-thumb-color;
+				border-radius: 4px;
+			}
 
+			&::-webkit-scrollbar-track {
+				background: @scrollbar-track-color;
+			}
 			.file-item {
 				position: relative;
 				padding: 8px 12px;
+				width: 100%;
 				border-bottom: 1px solid #f0f0f0;
 
 				&:last-child {
 					border-bottom: none;
 				}
 
+				.uploader-file-info {
+					width: 540px;
+				}
+
+				.uploader-file-name {
+					width: 44%;
+				}
+
+				.uploader-file-size {
+					width: 16%;
+				}
+				.uploader-file-status {
+					width: 30%;
+					text-indent: 0;
+				}
+
 				&.custom-status-item {
 					padding-right: 100px;
 				}
@@ -506,7 +541,7 @@
 					right: 12px;
 					top: 50%;
 					transform: translateY(-50%);
-					color: #1890ff;
+					color: #1878ff;
 				}
 			}
 

src/views/myResources/auditModal.vue

@@ -28,12 +28,12 @@
 					<p><strong>上传人：</strong>{{ detailData.resourceCreaterUserName || '--' }}</p>
 					<p><strong>所属院系：</strong>{{ detailData?.collegeAllIdName || '--' }}</p>
 					<p><strong>所属专业：</strong>{{ detailData?.majorIdName || '--' }}</p>
-					<p><strong>课程类型：</strong>{{ detailData?.courseTypeName || '--' }}</p>
-					<p><strong>课件格式：</strong>{{ detailData?.suffix || '--' }}</p>
+					<p><strong>资源类型：</strong>{{ detailData?.courseTypeName || '--' }}</p>
+					<p><strong>资源格式：</strong>{{ detailData?.suffix || '--' }}</p>
 					<p><strong>视频时长：</strong>{{ detailData?.duration || '--' }}</p>
 					<p><strong>视频大小：</strong>{{ detailData?.FILESIZE || '--' }}<span v-if="detailData?.FILESIZE">b</span></p>
 					<p><strong>发布时间：</strong>{{ detailData?.uploadTime || '--' }}</p>
-					<p><strong>课程介绍：</strong>{{ detailData?.resourceDesc || '--' }}</p>
+					<p><strong>资源描述：</strong>{{ detailData?.resourceDesc || '--' }}</p>
 				</div>
 			</div>
 		</div>

src/views/myResources/coverUpload/index.vue

@@ -57,11 +57,11 @@
 			default: false
 		}
 	})
-	const action = ref('http://192.168.31.80:9003/api/webapp/dev/file/uploadMinioReturnId')
+	const action = ref('/api/webapp/dev/file/uploadMinioReturnId')
 	// 封面文件列表
 	const coverFileList = ref([])
 	const fileList = ref([])
-	const coverImageId = ref('123')
+	const coverImageId = ref(null)
 	// 上传封面前的钩子函数
 	const beforeUploadCover = (file) => {
 		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'

src/views/myResources/myResources.vue

@@ -22,12 +22,12 @@
 					@change="changeCollegeMajor"
 				/>
 				<a-select
-					v-model:value="formState.courseTypeName"
+					v-model:value="formState.resourceTypeName"
 					style="width: 200px; margin-left: 8px"
 					:options="courseTypeOptions"
 					placeholder="请选择资源类型"
 				/>
-				<a-select v-model:value="formState.suffix" placeholder="课件格式" style="width: 200px; margin-left: 8px">
+				<a-select v-model:value="formState.suffix" placeholder="请选择资源格式" style="width: 200px; margin-left: 8px">
 					<a-select-option value="mp4">mp4</a-select-option>
 					<a-select-option value="ppt">ppt</a-select-option>
 					<a-select-option value="word">word</a-select-option>
@@ -69,7 +69,7 @@
 			<template #bodyCell="{ column, text, record }">
 				<template
 					v-if="
-						['fileName', 'collegeIdName', 'majorIdName', 'courseTypeName', 'suffix', 'uploadTime'].includes(
+						['fileName', 'collegeIdName', 'majorIdName', 'resourceTypeName', 'suffix', 'uploadTime'].includes(
 							column.dataIndex
 						)
 					"
@@ -94,6 +94,15 @@
 						<a-badge status="error" text="已删除" />
 					</span>
 				</template>
+				<template v-if="column.dataIndex === 'fileUrl'">
+					<!-- 动态图标 + 格式提示 -->
+					<a-tooltip :title="`${record.suffix || '未知'}`">
+						<component
+							:is="fileTypeIcons[record.suffix?.toLowerCase()] || fileTypeIcons['*']"
+							:style="{ fontSize: '24px', color: getIconColor(record.suffix) }"
+						/>
+					</a-tooltip>
+				</template>
 				<!-- 操作列 -->
 				<template v-else-if="column.key === 'action'">
 					<div class="editable-cell">
@@ -115,7 +124,15 @@
 										<a href="javascript:;" @click="handleView(record)">播放</a>
 									</a-menu-item>
 									<a-menu-item>
-										<a href="javascript:;">下载</a>
+										<!-- <a href="javascript:;">下载</a> -->
+										<a
+											target="_blank"
+											style="display: block; color: inherit"
+											:href="$file.getDownloadFilePath3(record)"
+											:download="record.fileName"
+										>
+											下载
+										</a>
 									</a-menu-item>
 									<a-menu-item v-if="formState.verifyStatus === '2'">
 										<a href="javascript:;" @click="edit(record)">编辑</a>
@@ -169,7 +186,7 @@
 			@getList="getList"
 		></resourceUpload>
 		<!-- 发布模态框 -->
-		<releaseModal v-if="releaseVisible" @close="releaseVisible = false" @confirm="confirm"></releaseModal>
+		<releaseModal v-if="releaseVisible" @close="releaseVisible = false" @confirm="releaseConfirm"></releaseModal>
 	</a-card>
 </template>
 
@@ -183,6 +200,17 @@
 	import auditModal from './auditModal.vue'
 	import CustomPagination from '@/components/customPagination.vue'
 	import tool from '@/utils/tool'
+	import {
+		FileOutlined,
+		FileImageOutlined,
+		FilePdfOutlined,
+		FileWordOutlined,
+		FileExcelOutlined,
+		FilePptOutlined,
+		FileTextOutlined,
+		FileZipOutlined,
+		PlaySquareOutlined
+	} from '@ant-design/icons-vue'
 	// eslint-disable-next-line vue/no-setup-props-destructure
 	const { pageType } = defineProps({
 		pageType: {
@@ -190,6 +218,34 @@
 			default: () => {}
 		}
 	})
+	const fileTypeIcons = {
+		// 图片类
+		jpg: 'FileImageOutlined',
+		jpeg: 'FileImageOutlined',
+		png: 'FileImageOutlined',
+		gif: 'FileImageOutlined',
+
+		// 文档类
+		pdf: 'FilePdfOutlined',
+		ppt: 'FilePptOutlined',
+		pptx: 'FilePptOutlined',
+		doc: 'FileWordOutlined',
+		docx: 'FileWordOutlined',
+		xls: 'FileExcelOutlined',
+		xlsx: 'FileExcelOutlined',
+		txt: 'FileTextOutlined',
+
+		// 视频类
+		mp4: 'PlaySquareOutlined',
+		mov: 'PlaySquareOutlined',
+
+		// 压缩包
+		zip: 'FileZipOutlined',
+		rar: 'FileZipOutlined',
+
+		// 默认图标
+		'*': 'FileOutlined'
+	}
 	// 数据源
 	const dataSource = ref([])
 	//发布按钮状态
@@ -215,7 +271,7 @@
 		verifyStatus: '0',
 		resourcesId: null,
 		majorIdName: null,
-		courseTypeName: null,
+		resourceTypeName: null,
 		suffix: null
 	})
 	// 添加选择状态
@@ -282,14 +338,15 @@
 			key: 'verifyStatus'
 		},
 		{
-			title: '操作',
+			title: '资源缩略图',
 			align: 'center',
-			key: 'action'
+			dataIndex: 'fileUrl',
+			key: 'fileUrl'
 		},
 		{
-			title: '资源缩略图',
+			title: '操作',
 			align: 'center',
-			key: 'image'
+			key: 'action'
 		}
 	]
 
@@ -327,8 +384,8 @@
 		{
 			title: '资源类型',
 			align: 'center',
-			dataIndex: 'courseTypeName',
-			key: 'courseTypeName'
+			dataIndex: 'resourceTypeName',
+			key: 'resourceTypeName'
 		},
 		{
 			title: '资源格式',
@@ -348,14 +405,15 @@
 			key: 'verifyStatus'
 		},
 		{
-			title: '操作',
+			title: '资源缩略图',
 			align: 'center',
-			key: 'action'
+			dataIndex: 'fileUrl',
+			key: 'fileUrl'
 		},
 		{
-			title: '资源缩略图',
+			title: '操作',
 			align: 'center',
-			key: 'image'
+			key: 'action'
 		}
 	]
 
@@ -378,6 +436,15 @@
 				return []
 		}
 	})
+	const getIconColor = (suffix) => {
+		const type = suffix?.toLowerCase()
+		if (['jpg', 'jpeg', 'png', 'gif'].includes(type)) return '#ff4d4f' // 图片红色
+		if (['pdf'].includes(type)) return '#f5222d' // PDF红色
+		if (['ppt', 'pptx'].includes(type)) return '#fa8c16' // PPT橙色
+		if (['doc', 'docx'].includes(type)) return '#1890ff' // Word蓝色
+		if (['xls', 'xlsx'].includes(type)) return '#52c41a' // Excel绿色
+		return '#666' // 默认灰色
+	}
 	const getListData = () => {
 		loading.value = true
 		let params = {
@@ -386,7 +453,7 @@
 			verifyStatus: formState.verifyStatus,
 			fileName: formState.fileName,
 			majorIdName: formState.majorIdName?.join(','),
-			courseTypeName: formState.courseTypeName,
+			resourceTypeName: formState.resourceTypeName,
 			suffix: formState.suffix
 		}
 		resourceAuditApi
@@ -406,6 +473,7 @@
 	}
 	const getList = () => {
 		getListData()
+		uploadModalVisible.value = false
 	}
 	//院系组织查询
 	const getOrgTreeSelector = () => {
@@ -429,7 +497,7 @@
 		searchValue.value = null
 		formState.majorIdName = null
 		formState.fileName = null
-		formState.courseTypeName = null
+		formState.resourceTypeName = null
 		formState.suffix = null
 		getListData()
 	}
@@ -467,7 +535,7 @@
 		selectedRows.value = dataSource.value.filter((item) => newSelectedKeys.includes(item.id))
 	}
 	//发布确定
-	const confirm = (obj) => {
+	const releaseConfirm = (obj) => {
 		console.log(obj, selectedRows.value, '传回来的数据')
 		releaseVisible.value = false
 		if (isPublishBulk.value) {
@@ -550,7 +618,7 @@
 	const handleRestore = (record) => {
 		const params = {
 			ids: record.id,
-			verifyStatus: 1
+			verifyStatus: 0
 		}
 		resourceAuditApi
 			.updateStatus(params)
@@ -593,9 +661,6 @@
 					console.error(err)
 				})
 		}
-
-
-
 	}
 
 	// 上传资源模态框

src/views/myResources/releaseModal.vue

@@ -50,7 +50,7 @@
 	const headers = ref({
 		token: tool.data.get('TOKEN')
 	})
-	const action = ref('http://192.168.31.80:9003/api/webapp/dev/file/uploadMinioReturnId')
+	const action = ref('/api/webapp/dev/file/uploadMinioReturnId')
 	const emit = defineEmits(['close', 'confirm'])
 
 	// 表单数据

src/views/myResources/resourceUpload.vue

@@ -37,9 +37,9 @@
 					placeholder="请选择课程"
 				/>
 			</a-form-item> -->
-			<a-form-item label="资源类型" name="courseType" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+			<a-form-item label="资源类型" name="resourceType" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
 				<a-select
-					v-model:value="formState.courseType"
+					v-model:value="formState.resourceType"
 					style="width: 200px"
 					:options="courseTypeOptions"
 					placeholder="请选择资源类型"
@@ -153,18 +153,18 @@
 	})
 	//课程类型
 	const courseTypeOptions = tool.dictList('COURSE_TYPE')
-	const action = ref('http://192.168.31.80:9003/api/webapp/dev/file/uploadMinioReturnId')
+	const action = ref('/api/webapp/dev/file/uploadMinioReturnId')
 	const formState = reactive({
-		userfileIds: '1234567', //资源文件id
+		userfileIds: null, //资源文件id
 		coverImage: null, //封面id
 		// courseId: null, //课程
 		// majorType: null, //专业
-		courseType: null, //资源类型
+		resourceType: null, //资源类型
 		collegeId: null, //院校一级id
 		collegeTwoId: null, //院校二级id
 		collegeThreeId: null, //院校三级id
 		resourceDesc: null, //资源介绍
-		majorId: '111111', //专业id
+		majorId: null, //专业id
 		// courseTypeName: [], // 资源类型
 		keywordValue: [], // 添加关键词
 		keyword: [], // 热门关键词
@@ -213,7 +213,7 @@
 			{ validator: validateKeywords, trigger: 'blur' }
 		],
 		majorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
-		courseType: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
+		resourceType: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
 		resourceDesc: [
 			{ required: true, message: '请输入资源描述', trigger: 'blur' },
 			{ pattern: /^[\s\S]{10,500}$/, message: '描述长度应在10-500字符之间', trigger: 'blur' }
@@ -335,7 +335,7 @@
 			const formData = {
 				id: props.resourcesId,
 				userfileIds: formState.userfileIds,
-				courseType: formState.courseType,
+				resourceType: formState.resourceType,
 				collegeId: formState.collegeId,
 				collegeTwoId: formState.collegeTwoId,
 				collegeThreeId: formState.collegeThreeId,
@@ -349,16 +349,16 @@
 				publicStatus: formState.publicStatus
 			}
 			console.log(formData, '上传数据')
-			// resourceAuditApi
-			// 	.add(formData)
-			// 	.then((res) => {
-			// 		emit('getList')
-			// 		Modal.success({ content: '资源上传成功' })
-			// 	})
-			// 	.catch((err) => {
-			// 		Modal.error({ content: '资源上传失败' })
-			// 		console.log(err)
-			// 	})
+			resourceAuditApi
+				.add(formData)
+				.then((res) => {
+					emit('getList')
+					Modal.success({ content: '资源上传成功' })
+				})
+				.catch((err) => {
+					Modal.error({ content: '资源上传失败' })
+					console.log(err)
+				})
 		} catch (error) {
 			if (error.errorFields) {
 				// 表单验证错误
@@ -374,7 +374,7 @@
 	const getDetail = () => {
 		resourceAuditApi.detail({ id: props.resourcesId }).then((res) => {
 			console.log(res.data, '资源详情')
-			formState.courseType = res.data.courseType
+			formState.resourceType = res.data.resourceType
 			formState.collegeId = res.data.collegeId
 			formState.collegeTwoId = res.data.collegeTwoId
 			formState.collegeThreeId = res.data.collegeThreeId
@@ -388,7 +388,7 @@
 	const getformState = () => {
 		resourceAuditApi.recentlyRecord().then((res) => {
 			console.log(res.data, '历史表单数据')
-			formState.courseType = res.data.courseType
+			formState.resourceType = res.data.resourceType
 			formState.collegeId = res.data.collegeId
 			formState.collegeTwoId = res.data.collegeTwoId
 			formState.collegeThreeId = res.data.collegeThreeId