东方国信-蔡芳 8 месяцев назад
Родитель
Сommit
41774a7fea
2 измененных файлов с 700 добавлено и 7 удалено
  1. 10 0
      src/api/myFavorites/index.js
  2. 690 7
      src/views/myFavorites/index.vue

+ 10 - 0
src/api/myFavorites/index.js

@@ -0,0 +1,10 @@
+import { baseRequest } from '@/utils/newRequest'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/` + url, ...arg)
+
+export default {
+	// 获取资管理审核括列表
+	page(data) {
+		return request('/disk/collect/selectPageList', data, 'get')
+	}
+}

+ 690 - 7
src/views/myFavorites/index.vue

@@ -1,16 +1,699 @@
 <template>
-	<div class="page-container">
-		<!-- 页面内容将放在这里 -->
-		<span>我的收藏</span>
-	</div>
+	<a-card>
+		<!-- 搜索和操作区域 -->
+		<a-row :gutter="16" style="margin-bottom: 16px">
+			<a-col :span="18">
+				<a-input v-model:value="formState.fileName" placeholder="请输入资源名称" style="width: 150px" />
+				<a-button type="primary" style="margin-left: 8px" @click="handleSearch">查询</a-button>
+				<a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
+			</a-col>
+		</a-row>
+
+		<!-- 表格 -->
+		<a-table
+			:columns="currentColumns"
+			:data-source="dataSource"
+			:pagination="false"
+			:loading="loading"
+			bordered
+			:row-key="(record) => record.id"
+			:row-selection="rowSelection"
+		>
+			<template #bodyCell="{ column, text, record }">
+				<template
+					v-if="
+						['fileName', 'collegeIdName', 'majorIdName', 'resourceTypeName', 'suffix', 'uploadTime'].includes(
+							column.dataIndex
+						)
+					"
+				>
+					<div class="multiLine-ellipsis" :title="text">{{ text || '-' }}</div>
+				</template>
+				<!-- 状态列 -->
+				<template v-if="column.key === 'verifyStatus'">
+					<span v-if="record.verifyStatus === '0'">
+						<a-badge status="processing" text="未发布" />
+					</span>
+					<span v-else-if="record.verifyStatus === 'uploaded'">
+						<a-badge status="success" text="已上传" />
+					</span>
+					<span v-else-if="record.verifyStatus === '1'">
+						<a-badge status="default" text="待审核" />
+					</span>
+					<span v-else-if="record.verifyStatus === '2'">
+						<a-badge status="success" text="已发布" />
+					</span>
+					<span v-else-if="record.verifyStatus === '4'">
+						<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">
+						<a  @click="handlePublish(record)">查看</a>
+					</div>
+				</template>
+			</template>
+		</a-table>
+		<div class="dis-flex-sb margin-top">
+			<div>
+				<CustomPagination
+					:total="pagination.total"
+					:current="pagination.pageNum"
+					:pageSize="pagination.pageSize"
+					:showQuickJumper="true"
+					:showSizeChanger="true"
+					:showTotal="(total) => `共 ${total} 条数据`"
+					@change="handlePageChange"
+					@showSizeChange="handlePageSizeChange"
+				/>
+			</div>
+		</div>
+		<!-- 权限树模态框 -->
+		<permissionTree v-if="permissionTreeVisible" @close="permissionTreeVisible = false"></permissionTree>
+		<!-- 审核播放模态框 -->
+		<auditModal
+			v-if="auditModalVisible"
+			:recordData="publishedData"
+			:isAudit="auditState"
+			@confirm="auditConfirm"
+			@close="auditModalVisible = false"
+		></auditModal>
+		<!-- 资源上传模态框 -->
+		<resourceUpload
+			v-if="uploadModalVisible"
+			:isState="isState"
+			:resourcesId="editResourcesId"
+			@close="uploadModalVisible = false"
+			@getList="getList"
+		></resourceUpload>
+		<!-- 发布模态框 -->
+		<releaseModal v-if="releaseVisible" @close="releaseVisible = false" @confirm="releaseConfirm"></releaseModal>
+	</a-card>
 </template>
 
 <script setup>
-	// 这里可以引入所需的逻辑和组件
+	import { useRouter, useRoute } from 'vue-router'
+	import { ref, onMounted } from 'vue'
+	import { DownOutlined } from '@ant-design/icons-vue'
+	import myFavoritesApi from '@/api/myFavorites'
+	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: {
+			type: String,
+			default: () => {}
+		}
+	})
+	const router = useRouter()
+	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([])
+	//发布按钮状态
+	const releaseVisible = ref(false)
+	const permissionTreeVisible = ref(false) //权限树
+	const auditModalVisible = ref(false) //播放审核
+	const isPublishBulk = ref(false) //是否批量发布
+	const loading = ref(false) // 列表loading
+	const isState = ref(0) //是否是编辑  0:新增 1:编辑
+	const editResourcesId = ref(null) //资源id
+	// 搜索值
+	const searchValue = ref('')
+	//课程类型
+	const courseTypeOptions = tool.dictList('COURSE_TYPE')
+	const suffixTypeOptions = ref([])
+	const pagination = reactive({
+		pageSize: 10,
+		pageNum: 1,
+		total: 0
+	})
+	const formState = reactive({
+		fileName: null,
+		verifyStatus: '0',
+		resourcesId: null,
+		// majorId: null, //专业
+		collegeId: null, //院校一级id
+		collegeTwoId: null, //院校二级id
+		collegeThreeId: null, //院校三级id
+		resourceType: null,
+		suffix: null
+	})
+	// 添加选择状态
+	const majorIdName = ref([])
+	const majorOptions = ref([]) //专业
+	const selectedRowKeys = ref([])
+	const selectedRows = ref([])
+	const publishedData = ref([]) //当前点击数据
+	// 行选择配置
+	const rowSelection = computed(() => {
+		return {
+			selectedRowKeys: selectedRowKeys.value,
+			onChange: (keys, rows) => {
+				selectedRowKeys.value = keys
+				selectedRows.value = rows
+			},
+			onSelectAll: (selected, selectedRows, changeRows) => {
+				if (selected) {
+					// 全选当前页
+					selectedRowKeys.value = dataSource.value.map((item) => item.id)
+					selectedRows.value = dataSource.value
+				} else {
+					// 取消全选
+					selectedRowKeys.value = []
+					selectedRows.value = []
+				}
+			},
+			onSelectInvert: () => {
+				// 反选当前页
+				const allKeys = dataSource.value.map((item) => item.id)
+				const newSelectedKeys = allKeys.filter((key) => !selectedRowKeys.value.includes(key))
+				selectedRowKeys.value = newSelectedKeys
+				selectedRows.value = dataSource.value.filter((item) => newSelectedKeys.includes(item.id))
+			}
+		}
+	})
+	// 列定义
+	const columnsUnpublished = [
+		{
+			title: '资源名称',
+			align: 'center',
+			dataIndex: 'fileName',
+			key: 'fileName'
+		},
+		{
+			title: '资源类型',
+			align: 'center',
+			dataIndex: 'resourceTypeName',
+			key: 'resourceTypeName'
+		},
+		{
+			title: '浏览量',
+			dataIndex: 'viewCount',
+			align: 'center',
+			key: 'viewCount'
+		},
+		{
+			title: '用户名',
+			align: 'center',
+			dataIndex: 'userName',
+			key: 'userName'
+		},
+		{
+			title: '操作',
+			align: 'center',
+			key: 'action'
+		}
+	]
+
+	const columnsPending = [
+		{
+			title: '编号',
+			dataIndex: 'id',
+			align: 'center',
+			key: 'id'
+		},
+		{
+			title: '资源名称',
+			align: 'center',
+			dataIndex: 'fileName',
+			key: 'fileName'
+		},
+		{
+			title: '所属院系',
+			align: 'center',
+			dataIndex: 'collegeAllIdName',
+			key: 'collegeAllIdName'
+		},
+
+		{
+			title: '资源类型',
+			align: 'center',
+			dataIndex: 'resourceTypeName',
+			key: 'resourceTypeName'
+		},
+		{
+			title: '资源格式',
+			align: 'center',
+			dataIndex: 'suffix',
+			key: 'suffix'
+		},
+		{
+			title: '上传时间',
+			align: 'center',
+			dataIndex: 'uploadTime',
+			key: 'uploadTime'
+		},
+		{
+			title: '状态',
+			align: 'center',
+			key: 'verifyStatus'
+		},
+		{
+			title: '资源缩略图',
+			align: 'center',
+			dataIndex: 'fileUrl',
+			key: 'fileUrl'
+		},
+		{
+			title: '操作',
+			align: 'center',
+			key: 'action'
+		}
+	]
+
+	const columnsPublished = [...columnsPending]
+	const columnsRecycle = [...columnsPending]
+	const collegeMajorOptions = ref([]) //院校下拉数据
+	const resourceTypeOptions = ref([]) //资源类型下拉数据
+	const fileformatOptions = ref([]) //资源格式下拉数据
+	const currentColumns = computed(() => {
+		switch (formState.verifyStatus) {
+			case '0':
+				return columnsUnpublished
+			case '1':
+				return columnsPending
+			case '2':
+				return columnsPublished
+			case '3':
+				return columnsPublished
+			case '4':
+				return columnsRecycle
+			default:
+				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 = {
+			current: pagination.pageNum,
+			size: pagination.pageSize,
+			fileName: formState.fileName
+		};
+		myFavoritesApi
+			.page(params)
+			.then((res) => {
+				dataSource.value = res.data.records
+				pagination.total = res.data.total
+				loading.value = false
+			})
+			.catch((err) => {
+				console.log(err)
+				dataSource.value = []
+				pagination.total = 0
+				loading.value = false
+			})
+	}
+	const changeCollegeMajor = (value, selectedOptions) => {
+		console.log('Selected:', value, selectedOptions)
+		majorIdName.value = selectedOptions.map((it) => it.name).join('/')
+		formState.collegeId = value[0] || null
+		formState.collegeTwoId = value[1] || null
+		formState.collegeThreeId = value[2] || null
+		if (selectedOptions.length) {
+			// 获取选中的最后一级
+			const lastSelected = selectedOptions[selectedOptions.length - 1]
+			console.log(lastSelected, '最后一级id')
+			getCollegeMajor(lastSelected.id)
+		}
+	}
+	const getList = () => {
+		getListData()
+		uploadModalVisible.value = false
+	}
+	//院系组织查询
+	const getOrgTreeSelector = () => {
+		resourceAuditApi
+			.orgTreeSelector()
+			.then((res) => {
+				console.log(res.data, '获取组织树选择器')
+				collegeMajorOptions.value = res.data
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+	//资源类型下拉查询
+	const getResourceTypeTree = () => {
+		resourceAuditApi
+			.resourceTypeTree()
+			.then((res) => {
+				console.log(res.data, '资源类型下拉')
+				// resourceTypeOptions.value = res.data
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+	//资源格式下拉查询
+	const getFileformat = () => {
+		resourceAuditApi
+			.fileformat()
+			.then((res) => {
+				console.log(res.data, '资源类型下拉')
+				fileformatOptions.value = res.data.records
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+	const getCollegeMajor = (id) => {
+		resourceAuditApi
+			.zyselect({ collegeId: id })
+			.then((res) => {
+				console.log(res.data, '专业下拉数据')
+				majorOptions.value = res.data
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+	// 方法
+	const handleSearch = () => {
+		console.log('Search:', searchValue.value)
+		getListData()
+	}
+
+	const handleReset = () => {
+		searchValue.value = null
+		majorIdName.value = null
+		formState.fileName = null
+		formState.resourceType = null
+		formState.suffix = null
+		formState.collegeTwoId = null
+		// formState.majorId = null
+		formState.collegeId = null
+		formState.collegeThreeId = null
+		getListData()
+	}
+	const tabChange = () => {
+		dataSource.value = []
+		getListData()
+	}
+	//发布
+	const handlePublish = (record) => {
+		publishedData.value = record;
+		router.push({
+			path: '/portal/resourceDetails',
+			query: {
+				id: record.resourceId
+			}
+		})
+	}
+	// 批量发布方法
+	const batchPublish = () => {
+		if (selectedRows.value.length === 0) {
+			message.warning('请至少选择一条记录')
+			return
+		}
+		isState.value = 0
+		isPublishBulk.value = true
+		releaseVisible.value = true
+	}
+	// 全选当前页数据
+	const selectAll = () => {
+		selectedRowKeys.value = dataSource.value.map((item) => item.id)
+		selectedRows.value = dataSource.value
+	}
+
+	// 反选当前页数据
+	const invertSelection = () => {
+		const allKeys = dataSource.value.map((item) => item.id)
+		const newSelectedKeys = allKeys.filter((key) => !selectedRowKeys.value.includes(key))
+		selectedRowKeys.value = newSelectedKeys
+		selectedRows.value = dataSource.value.filter((item) => newSelectedKeys.includes(item.id))
+	}
+	//发布确定
+	const releaseConfirm = (obj) => {
+		console.log(obj, selectedRows.value, '传回来的数据')
+		releaseVisible.value = false
+		if (isPublishBulk.value) {
+			// const batchParams = selectedRows.value.map((item) => ({
+			// 	id: item.id,
+			// 	coverImage: item.coverImage,
+			// 	resourceDesc: item.resourceDesc,
+			// 	verifyStatus: 1
+			// }))
+			const params = {
+				ids: selectedRows.value.map((item) => item.id).join(','),
+				coverImage: obj.coverImageId,
+				resourceDesc: obj.resourceDesc,
+				verifyStatus: 1
+			}
+			console.log(params, '批量发布参数')
+			// handleRelease(params)
+		} else {
+			const params = {
+				ids: publishedData.value.id,
+				coverImage: obj.coverImageId,
+				resourceDesc: obj.resourceDesc,
+				verifyStatus: 1
+			}
+			console.log(params, '发布参数')
+			handleRelease(params)
+		}
+	}
+	// updateStatus接口调用
+	const handleRelease = (Params) => {
+		resourceAuditApi
+			.updateStatus(Params)
+			.then((res) => {
+				getListData()
+				selectedRowKeys.value = []
+			})
+			.catch((err) => {
+				console.error(err)
+			})
+	}
+	const auditState = ref(null)
+	const handleAudit = (record) => {
+		console.log('Audit:', record)
+		publishedData.value = record
+		auditState.value = true
+		auditModalVisible.value = true
+	}
+	const handleView = (record) => {
+		publishedData.value = record
+		auditState.value = false
+		auditModalVisible.value = true
+	}
+	const handleDownload = (record) => {
+		resourceAuditApi
+			.downloadfile({
+				userFileId: record.fileId,
+				shareBatchNum: record.shareBatchNum == null ? '' : record.shareBatchNum,
+				extractionCode: record.extractionCode == null ? '' : record.extractionCode,
+				admin: true
+			})
+			.then((res) => {
+				console.log('下载成功:', res)
+				// 创建Blob对象
+				const url = window.URL.createObjectURL(new Blob([res]))
+				const link = document.createElement('a')
+				link.href = url
+				link.download = record.fileName || `file_${record.id}.${record.suffix}`
+				document.body.appendChild(link)
+				link.click()
+				window.URL.revokeObjectURL(url)
+				document.body.removeChild(link)
+			})
+			.catch((err) => {
+				console.error(err)
+			})
+	}
+
+	const handlePermission = (record) => {
+		console.log('Permission:', record)
+		permissionTreeVisible.value = true
+	}
+	const auditConfirm = (obj) => {
+		console.log('auditConfirm:', obj)
+		const params = {
+			ids: obj.id,
+			verifyStatus: obj.auditResult
+		}
+		resourceAuditApi
+			.updateStatus(params)
+			.then((res) => {
+				if (res.code == 200) {
+					auditModalVisible.value = false
+				}
+				getListData()
+			})
+			.catch((err) => {
+				console.error(err)
+			})
+	}
+
+	const handleDelete = (record) => {
+		console.log('Delete:', record)
+	}
+	const handleRestore = (record) => {
+		const params = {
+			ids: record.id,
+			verifyStatus: 0
+		}
+		resourceAuditApi
+			.updateStatus(params)
+			.then((res) => {
+				getListData()
+			})
+			.catch((err) => {
+				console.error(err)
+			})
+	}
+	//资源编辑
+	const edit = (record) => {
+		console.log('Restore:', record)
+		uploadModalVisible.value = true
+		isState.value = 1
+		editResourcesId.value = record.id
+	}
+	//资源删除
+	const resourcesDelete = (record) => {
+		if (formState.verifyStatus == 4) {
+			const params = [
+				{
+					id: record.id
+				}
+			]
+			resourceAuditApi
+				.deletefile(params)
+				.then((res) => {
+					getListData()
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+		} else {
+			const params = {
+				ids: record.id,
+				verifyStatus: 4
+			}
+			resourceAuditApi
+				.updateStatus(params)
+				.then((res) => {
+					getListData()
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+		}
+	}
+
+	// 上传资源模态框
+	const uploadModalVisible = ref(false)
+
+	// 显示上传模态框
+	const showUploadModal = () => {
+		isState.value = 0
+		uploadModalVisible.value = true
+	}
+	// 翻页
+	const handlePageChange = (page) => {
+		pagination.pageNum = page
+		getListData()
+	}
+	// 每页条数
+	const handlePageSizeChange = (pageNum, size) => {
+		pagination.pageNum = 1
+		pagination.pageSize = size
+		getListData()
+	}
+
+	onMounted(() => {
+		// if (pageType == 'economize') {
+		// 	formState.verifyStatus = '1'
+		// }
+		getOrgTreeSelector()
+		getFileformat()
+		getResourceTypeTree()
+		getListData()
+	})
 </script>
 
 <style scoped>
-	.page-container {
-		padding: 20px;
+	.editable-cell {
+		position: relative;
+	}
+
+	.ant-dropdown-link {
+		margin-left: 8px;
+	}
+
+	.upload-area {
+		border: 2px dashed #3ca9f5;
+		padding: 40px;
+		text-align: center;
+	}
+
+	.upload-area p {
+		margin: 10px 0;
+	}
+
+	.file-item {
+		display: flex;
+		align-items: center;
+		margin: 10px 0;
+	}
+
+	.file-item .ant-progress {
+		flex: 1;
+		margin: 0 10px;
 	}
 </style>