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

<template>
	<a-table
		ref="table"
		:columns="columns"
		:data-source="dataSources"
		:row-key="(record) => record.courseId"
		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="handleCopy(record)" style="margin-right: 5px">复制</a-button>
				<a-popover v-model:visible="popoverVisible[record.courseId]" title="确定下架?" trigger="click">
					<template #content>
						<a-button style="margin-right: 10px" type="primary" @click="handleShelf(record, 0)">确定 </a-button>
						<a-button
							@click="
								() => {
									popoverVisible[record.courseId] = false
								}
							"
							>取消</a-button
						>
					</template>
					<!--					<a-button size="small" style="margin-right: 5px">选择</a-button>-->
					<a-button v-if="record.putawayStatus == 1" size="small" style="margin-right: 5px">下架</a-button>
				</a-popover>
				<a-popover v-model:visible="popoverVisibles[record.courseId]" title="确定上架?" trigger="click">
					<template #content>
						<a-button style="margin-right: 10px" type="primary" @click="handleShelf(record, 1)">确定 </a-button>
						<a-button
							@click="
								() => {
									popoverVisibles[record.courseId] = false
								}
							"
							>取消</a-button
						>
					</template>
					<!--					<a-button size="small" style="margin-right: 5px">选择</a-button>-->
					<a-button v-if="record.putawayStatus == 0" size="small" style="margin-right: 5px">上架</a-button>
				</a-popover>

				<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="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, copy } from '@/api/courseinfo'
	import { useRouter } from 'vue-router'
	import collegeApi from '@/api/college'
	import { updateCourseStatus } from '@/api/course/courseDetail'

	const router = useRouter()

	const emit = defineEmits(['handleEdit', 'handleDetail'])
	//发布按钮状态
	const releaseVisible = ref(false)
	const loading = ref(false) // 列表loading
	const dataSources = ref([])
	const popoverVisible = ref({})
	const popoverVisibles = ref({})
	const formState = ref({
		name: '',
		loacl: ''
	}) // 列表loading
	const columns = [
		{
			title: '课程名称',
			dataIndex: 'courseName',
			sorter: true,
			width: '15%'
		},
		{
			title: '状态',
			dataIndex: 'putawayStatusName',
			sorter: true,
			width: '10%'
		},
		{
			title: '院系',
			dataIndex: 'collegeTwoIdName',
			sorter: true,
			width: '15%'
		},
		{
			title: '课程类型',
			dataIndex: 'courseTypeName',
			sorter: true,
			width: '8%'
		},
		{
			title: '课时数量',
			dataIndex: 'hourCount',
			sorter: true,
			width: '7%'
		},
		{
			title: '发布时间',
			dataIndex: 'publishTime',
			sorter: true,
			width: '12%'
		},
		{
			title: '操作',
			dataIndex: 'action',
			sorter: true,
			width: '20%'
		}
	]
	// tool.formatTimestamp()

	const formatTimestamp = (time) => {
		return tool.formatTimestamp(time)
	}
	const total = ref(0)
	const pagination = ref({
		size: 10,
		current: 1
	})
	const onChangeCurrent = (current) => {
		router.push({
			path: '/' + current
		})
	}
	const handlerChange = (page, pageSize) => {
		console.log('分页参数', page, pageSize)
		// pagination.value.size = pageSize
		// pagination.value.current = page

		getList()
	}
	const handleDetail = (record) => {
		console.log('查看详情', record)
		// router.push({
		// 	path: '/portal/courseDetails',
		// 	query: {
		// 		id: record.courseId
		// 	}
		// })
		emit('handleDetail', record)
	}

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

		emit('handleEdit', record)
	}
	const handleCopy = (record) => {
		console.log('拷贝记录', record)
		// 在这里添加编辑记录的逻辑
		copy({ courseId: record.courseId }).then((res) => {
			if (res.code == 200) {
				getList()
			}
		})
		// getList()
	}

	// 上架按钮点击事件
	const handleShelf = (record, num) => {
		console.log('上架记录', record)
		popoverVisible.value[record.courseId] = false
		popoverVisibles.value[record.courseId] = false
		// 在这里添加上架记录的逻辑
		// {
		// 	"courseId": "1948183431150227458",
		// 	"putawayStatus": 1
		// }
		updateCourseStatus({ courseId: record.courseId, putawayStatus: num }).then((res) => {
			getList()
		})
	}

	// 删除按钮点击事件
	const handleDelete = (record) => {
		console.log('删除记录', record)
		// 在这里添加删除记录的逻辑
	}
	const getList = () => {
		list({ ...pagination.value }).then((data) => {
			if (data.code == 200) {
				dataSources.value = []
				dataSources.value = data.data.records
				pagination.value.current = data.data.current
				pagination.value.size = data.data.size
				total.value = data.data.total
			}
			// data.records
		})
	}
	const setList = (search) => {
		console.log('获取列表 setList', search)
		// courseName: '',
		// 	collegeId: '',
		// 	majorId: '',
		// 	courseType: '',
		// 	loacl: []
		formState.value = search
		pagination.value.current = 1
		list({ ...pagination.value, ...formState.value }).then((data) => {
			if (data.code == 200) {
				dataSources.value = data.data.records
				pagination.value.current = data.data.current
				pagination.value.size = data.data.size
				total.value = data.data.total
			}
			// data.records
		})
	}

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

	// watch(
	// 	() => dataSources.value,
	// 	(newVal, oldVal) => {
	// 		console.log('数据源变化了 ', ' 新的 ',newVal, '  旧的 ',oldVal)
	// 	},
	// 	{ deep: true, immediate: true }
	// )
	defineExpose({
		setList
	})
</script>

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