OnlineEducation-student-front/src/views/myFavorites/index.vue

<template>
	<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 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'
		// }
	//	getFileformat()
	//	getResourceTypeTree()
		getListData()
	})
</script>

<style scoped>
	.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>