OnlineEducation-student-front/src/views/courseManagement/components/ListView.vue

<template>
	<a-table
		ref="table"
		:columns="columns"
		:data-source="dataSource"
		:row-key="(record) => record.collegeId"
		bordered
		:expand-row-by-click="true"
		:pagination="false"
		size="small"
	>
		<template #bodyCell="{ column, text, record }">
			<template v-if="column.dataIndex === 'publishTime'">{{ formatTimestamp(text) }}</template>
			<template v-if="column.dataIndex === 'action'">
				<a-button size="small" @click="handleDetail(record)" style="margin-right: 5px">详情</a-button>
				<a-button size="small" @click="handleEdit(record)" style="margin-right: 5px">编辑</a-button>
				<a-button size="small" @click="handleShelf(record)" style="margin-right: 5px">上架</a-button>
				<a-button size="small" @click="handleDelete(record)" style="margin-right: 5px">删除</a-button>
			</template>
		</template>
	</a-table>
	<div style="display: flex; width: 100%; justify-content: flex-end; margin-top: 10px">
		<a-pagination
			v-model:current="pagination.current"
			v-model:pageSize="pagination.size"
			:total="pagination.total"
			show-less-items
			@change="handlerChange"
		/>
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import { ref, onMounted } from 'vue'
	import { EyeOutlined, EditOutlined, SnippetsOutlined, DeleteOutlined } from '@ant-design/icons-vue'
	import { list } from '@/api/courseinfo'
	import { useRouter } from 'vue-router'
	import collegeApi from '@/api/college'

	const router = useRouter()

	const emit = defineEmits(['handleEdit'])
	//发布按钮状态
	const releaseVisible = ref(false)
	const loading = ref(false) // 列表loading
	const dataSource = ref([])
	const formState = ref({
		name: '',
		loacl: ''
	}) // 列表loading
	const columns = [
		{
			title: '课程名称',
			dataIndex: 'courseName',
			sorter: true,
			width: '20%'
		},
		{
			title: '状态',
			dataIndex: 'courseType',
			sorter: true,
			width: '10%'
		},
		{
			title: '课程类型',
			dataIndex: 'isCreaterName',
			sorter: true,
			width: '20%'
		},
		{
			title: '课时数量',
			dataIndex: 'majorId',
			sorter: true,
			width: '10%'
		},
		{
			title: '更新时间',
			dataIndex: 'publishTime',
			sorter: true,
			width: '20%'
		},
		{
			title: '操作',
			dataIndex: 'action',
			sorter: true,
			width: '20%'
		}
	]
	// tool.formatTimestamp()

	const formatTimestamp = (time) => {
		return tool.formatTimestamp(time)
	}
	const pagination = reactive({
		size: 10,
		current: 1,
		total: 0
	})
	const onChangeCurrent = (current) => {
		router.push({
			path: '/' + current
		})
	}
	const handlerChange = (page, pageSize) => {
		pagination.size = pageSize
		pagination.current = page

		getList()
	}
	const publishedData = ref()
	//发布确定

	// 上传资源模态框
	const uploadModalVisible = ref(false)
	// 详情按钮点击事件
	const handleDetail = (record) => {
		console.log('查看详情', record)
		router.push({
			path: '/portal/courseDetails',
			query: {
				id: record.courseId
			}
		})
		// 在这里添加查看详情的逻辑
	}

	// 编辑按钮点击事件
	const handleEdit = (record) => {
		console.log('编辑记录', record)
		// 在这里添加编辑记录的逻辑

		emit('handleEdit', record)
	}

	// 上架按钮点击事件
	const handleShelf = (record) => {
		console.log('上架记录', record)
		// 在这里添加上架记录的逻辑
	}

	// 删除按钮点击事件
	const handleDelete = (record) => {
		console.log('删除记录', record)
		// 在这里添加删除记录的逻辑
	}
	const getList = () => {
		console.log('获取列表', list)

		list({ ...pagination }).then((data) => {
			if (data.code == 200) {
				dataSource.value = data.data.records
				pagination.current = data.data.current
				pagination.size = data.data.size
				pagination.total = data.data.total
			}
			// data.records
		})
	}
	const setList = (search) => {
		console.log('获取列表', list)
		formState.value = search
		pagination.current = 1
		list({ ...pagination, ...search }).then((data) => {
			if (data.code == 200) {
				dataSource.value = data.data.records
				pagination.current = data.data.current
				pagination.size = data.data.size
				pagination.total = data.data.total
			}
			// data.records
		})
	}

	// 重置按钮点击事件
	onMounted(() => {
		// getListData()
		getList()
	})

	defineExpose({
		setList
	})
</script>

<style scoped>
	.desc p {
		margin-bottom: 1em;
	}
</style>