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

<template>
	<a-card>
		<!-- 标签页 -->
		<a-tabs v-model:activeKey="formState.verifyStatus" @change="tabChange">
			<a-tab-pane key="0" tab="未发布"></a-tab-pane>
			<a-tab-pane key="1" tab="待审核"></a-tab-pane>
			<a-tab-pane key="2" tab="已发布"></a-tab-pane>
			<a-tab-pane key="4" tab="回收站"></a-tab-pane>
		</a-tabs>

		<!-- 搜索和操作区域 -->
		<a-row :gutter="16" style="margin-bottom: 16px">
			<a-col :span="8">
				<a-input v-model:value="searchValue" placeholder="请输入资源名称" style="width: 200px" />
				<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-col :span="16" style="text-align: right">
				<a-button type="primary" @click="showUploadModal">+ 上传资源</a-button>
			</a-col>
		</a-row>

		<!-- 表格 -->
		<a-table
			:columns="currentColumns"
			:data-source="dataSource"
			:pagination="false"
			:loading="loading"
			bordered
			:row-key="(record) => record.id"
		>
			<template #bodyCell="{ column, text, record }">
				<template
					v-if="
						['fileName', 'collegeIdName', 'majorIdName', 'courseTypeName', '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-else-if="column.key === 'action'">
					<div class="editable-cell">
						<template v-if="formState.verifyStatus === '0'">
							<a @click="handlePublish(record)">发布</a>
							<a-divider type="vertical" />
							<a-dropdown>
								<a class="ant-dropdown-link">
									更多
									<DownOutlined />
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item>
											<a href="javascript:;">播放</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">下载</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">删除</a>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</template>

						<template v-else-if="formState.verifyStatus === '1'">
							<a @click="handleAudit(record)">审核</a>
							<a-divider type="vertical" />
							<a-dropdown>
								<a class="ant-dropdown-link">
									更多
									<DownOutlined />
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item>
											<a href="javascript:;">播放</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">下载</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">删除</a>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</template>

						<template v-else-if="formState.verifyStatus === '2'">
							<a @click="handlePermission(record)">权限</a>
							<a-divider type="vertical" />
							<a-dropdown>
								<a class="ant-dropdown-link">
									更多
									<DownOutlined />
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item>
											<a href="javascript:;">播放</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">下载</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;" @click="edit(record)">编辑</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">删除</a>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</template>

						<template v-else-if="formState.verifyStatus === '4'">
							<a @click="handleRestore(record)">恢复</a>
							<a-divider type="vertical" />
							<a-dropdown>
								<a class="ant-dropdown-link">
									更多
									<DownOutlined />
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item>
											<a href="javascript:;">播放</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">下载</a>
										</a-menu-item>
										<a-menu-item>
											<a href="javascript:;">删除</a>
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</template>
					</div>
				</template>
			</template>
		</a-table>
		<div class="dis-flex-end margin-top">
			<CustomPagination
				:total="pagination.total"
				:current="pagination.pageNum"
				:pageSize="pagination.pageSize"
				:showQuickJumper="true"
				:showSizeChanger="true"
				:showTotal="(total) => `共 ${total} 条数据`"
				@change="handlePageChange"
				@showSizeChange="handlePageSizeChange"
			/>
		</div>
		<!-- 资源上传模态框 -->
		<resourceUpload
			:visible="uploadModalVisible"
			@close="uploadModalVisible = false"
			@getList="getList"
		></resourceUpload>
		<!-- 发布模态框 -->
		<releaseModal
			:isState="isState"
			v-if="releaseVisible"
			@close="releaseVisible = false"
			@confirm="confirm"
		></releaseModal>
	</a-card>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { DownOutlined } from '@ant-design/icons-vue'
	import releaseModal from './releaseModal.vue'
	import resourceUpload from './resourceUpload.vue'
	import resourceAuditApi from '@/api/resourceAudit.js'
	import CustomPagination from '@/components/customPagination.vue'

	import tool from '@/utils/tool'
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	const action = ref('http://192.168.31.80:9003/api/webapp/dev/file/uploadMinioReturnId')
	// 数据源
	const dataSource = ref([])

	// const activeKey = ref('0')
	//发布按钮状态
	const releaseVisible = ref(false)
	const loading = ref(false) // 列表loading

	const isState = ref(0) // 列表loading

	// 搜索值
	const searchValue = ref('')

	const pagination = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 0
	})
	const formState = reactive({
		fileName: null,
		verifyStatus: '0',
		resourcesId: null
	})
	// 列定义
	const columnsUnpublished = [
		{
			title: '编号',
			align: 'center',
			dataIndex: 'fileId',
			key: 'fileId'
		},
		{
			title: '资源名称',
			align: 'center',
			dataIndex: 'fileName',
			key: 'fileName'
		},
		{
			title: '课件格式',
			align: 'center',
			dataIndex: 'suffix',
			key: 'suffix'
		},
		{
			title: '上传时间',
			dataIndex: 'uploadTime',
			align: 'center',
			key: 'uploadTime'
		},
		{
			title: '状态',
			align: 'center',
			key: 'verifyStatus'
		},
		{
			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: 'collegeIdName',
			key: 'collegeIdName'
		},
		{
			title: '所属专业',
			align: 'center',
			dataIndex: 'majorIdName',
			key: 'majorIdName'
		},
		{
			title: '课程类型',
			align: 'center',
			dataIndex: 'courseTypeName',
			key: 'courseTypeName'
		},
		{
			title: '课件格式',
			align: 'center',
			dataIndex: 'suffix',
			key: 'suffix'
		},
		{
			title: '上传时间',
			align: 'center',
			dataIndex: 'uploadTime',
			key: 'uploadTime'
		},
		{
			title: '状态',
			align: 'center',
			key: 'verifyStatus'
		},
		{
			title: '操作',
			align: 'center',
			key: 'action'
		}
	]

	const columnsPublished = [...columnsPending]
	const columnsRecycle = [...columnsPending]

	const currentColumns = computed(() => {
		switch (formState.verifyStatus) {
			case '0':
				return columnsUnpublished
			case '1':
				return columnsPending
			case '2':
				return columnsPublished
			case '4':
				return columnsRecycle
			default:
				return []
		}
	})
	const getListData = () => {
		loading.value = true
		let params = {
			current: pagination.pageNum,
			size: pagination.pageSize,
			verifyStatus: formState.verifyStatus,
			fileName: formState.fileName
		}
		resourceAuditApi
			.page(params)
			.then((res) => {
				console.log(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 getList = () => {
		getListData()
	}
	// 方法
	const handleSearch = () => {
		console.log('Search:', searchValue.value)
	}

	const handleReset = () => {
		searchValue.value = ''
	}
	const tabChange = () => {
		dataSource.value = []
		getListData()
	}
	const publishedData = ref()
	//发布
	const handlePublish = (record) => {
		publishedData.value = record
		isState.value = 0
		releaseVisible.value = true
	}
	//发布确定
	const confirm = (obj) => {
		console.log(obj, '传回来的数据')
		let params = {
			courseAuditId: publishedData.value.courseAuditId,
			fileId: publishedData.value.fileId,
			collegeId: publishedData.value.collegeId,
			majorId: publishedData.value.majorId,
			courseType: obj.courseType,
			courseName: obj.courseName,
			courseDesc: obj.courseDesc,
			coverImageId: obj.coverImageId
		}
		resourceAuditApi
			.release(params)
			.then((res) => {
				console.log(res, '资源审核列表')
			})
			.catch((err) => {
				console.log(err)
				dataSource.value = []
				pagination.total = 0
				loading.value = false
			})
	}

	const handleAudit = (record) => {
		console.log('Audit:', record)
	}

	const handlePermission = (record) => {
		console.log('Permission:', record)
	}

	const handleRestore = (record) => {
		console.log('Restore:', record)
	}
	//课程编辑
	const edit = (record) => {
		console.log('Restore:', record)
		releaseVisible.value = true
		isState.value = 1
	}

	// 上传资源模态框
	const uploadModalVisible = ref(false)

	// 显示上传模态框
	const showUploadModal = () => {
		uploadModalVisible.value = true
	}
	// 翻页
	const handlePageChange = (page) => {
		pagination.pageNum = page
		getListData()
	}
	// 每页条数
	const handlePageSizeChange = (pageNum, size) => {
		pagination.pageNum = 1
		pagination.pageSize = size
		getListData()
	}

	onMounted(() => {
		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>