OnlineEducation-back-front/src/views/announcementManagement/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 === 'content'">
				<a-popover title="详细内容" trigger="hover">
					<template #content>
						{{ text }}
					</template>
					<template v-if="text.length > 10">
						<span>{{ text.slice(0, 10) }}...</span>
					</template>
				</a-popover>
				<template v-if="text.length <= 10">
					<span>{{ text }}</span>
				</template>
			</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-popover v-model:visible="popoverVisibles[record.collegeId]" title="确定删除?" trigger="click">
					<template #content>
						<a-button style="margin-right: 10px" type="primary" @click="handleShelf(record, 1)">确定 </a-button>
						<a-button
							@click="
								() => {
									popoverVisibles[record.collegeId] = false
								}
							"
							>取消</a-button
						>
					</template>
					<!--					<a-button size="small" style="margin-right: 5px">选择</a-button>-->
					<a-button size="small" @click="handleDelete(record)" style="margin-right: 5px">删除</a-button>
				</a-popover>
			</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 } from '@/api/notice'
	import { useRouter } from 'vue-router'
	import collegeApi from '@/api/college'
	import { updateCourseStatus } from '@/api/course/courseDetail'

	const router = useRouter()

	const emit = defineEmits(['handleEdit'])
	//发布按钮状态
	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: 'title',
			sorter: true,
			width: '15%'
		},
		{
			title: '内容',
			dataIndex: 'content',
			sorter: true,
			width: '15%'
		},
		{
			title: '发布时间',
			dataIndex: 'createTime',
			sorter: true,
			width: '12%'
		},
		{
			title: '操作',
			dataIndex: 'action',
			sorter: true,
			width: '10%'
		}
	]
	// 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
			}
		})
		// 在这里添加查看详情的逻辑
	}

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

		emit('handleEdit', record)
	}

	// 上架按钮点击事件
	const handleShelf = (record, num) => {
		console.log('上架记录', record)
		popoverVisible.value[record.collegeId] = 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,
		getList
	})
</script>

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